나는 완전히 자바 스크립트/jQuery를에 안돼서 자바 스크립트 함수 AJAX

Question

사용 후 내 온 클릭을 호출 할 수 없습니다와 나는 약간의 문제 :

내가 생성하고 양식 필드를 채울 datas를 얻을 수 AJAX를 사용하고 있습니다 . 그 후, 내가 추가하고 싶습니다/또는 자바 스크립트 함수와 필드를 제거하지만 작동하지 않습니다.

나는 배우기 때문에 단계별로 코드를 작성하므로 다음 코드는 완벽하게 작동하는 ajax 요청을 구현하고 + click 속성에서 + 영상.

$(document).ready(function(){ 

var id = $('#subId').val(); 
var num  = $('.cloneSub').length; 
var newNum = new Number(num + 1); 

$.ajax({ 
    type: 'POST', 
    dataType: 'json', 
    url: '/admin/popsub2/', 
    data: 'id='+id, 
    async: false, 
    success: function(data){ 

     $.each(data, function(key, val){ 

      // Add and populate the input text element 
      var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
      newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

      $('#sub' + num).attr('value', val); 

      $('#sub' + num).after(newElem); 
      $(newElem).before('<br />'); 

      // Simply add the select element 
      var newSelect = $('#editMenu_article' + num).clone().attr('id', 'editMenu_article' + newNum); 
      newSelect.children(':first').attr('id', 'editMenu_article' + newNum).attr('name', 'editMenu_article' + newNum); 

      $('#editMenu_article' + num).after(newSelect); 
      $(newSelect).before('<br />'); 
     }); 
    }, 

    failure: function(){ 
     alert('echec !!!'); 
    } 
}); 


function addField(){ 

    // Add the input text element 
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

    $('#sub' + num).attr('value', val); 

    $('#sub' + num).after(newElem); 
    $(newElem).before('<br />'); 

    // Add the select element 
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum); 
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum); 

    $('#addMenu_article' + num).after(newSelect); 
    $(newSelect).before('<br />'); 

} 

}); 

addField() 함수가 전혀 작동하지 않으며 이유를 모르겠습니다. AJAX는 스크립트 실행을 계속 유지하는 것처럼 보입니다.

고맙습니다.

UPDATE

내 + 이미지는 다음과 같습니다

$('#editSub2').live('click', function(){ ... }); 

$('#editSub2').bind('click', function(){ ... }); 

을하지만 아무것도 작동 :

<img src="images/plus.png" id="editSub2" /> 

내가 그 코드를 시도 당신의 도움에 따라.

Answer 1

귀하는 jQuery 문서 준비 콜백 범위 내에 addField()을 선언했습니다. 그 기능 밖의 아무도 그것에 대해 알 수 없습니다. 전역 함수로 선언 할 수 있지만 더 잘 캡슐화 할 수 있습니다. 유용한 자료 인 Javascript Patterns과 같은 것을 찾을 수 있습니다.

Answer 2

이미지가 동적으로 작성된 경우, 작성한 후에 click 이벤트를 바인드해야합니다. 그렇지 않은 경우, 문서 준비 블록에서 click 이벤트를 바인드해야합니다.

$('img#myimg').bind("click", function(){ 

// Add the input text element 
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum); 
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum); 

    $('#sub' + num).attr('value', val); 

    $('#sub' + num).after(newElem); 
    $(newElem).before('<br />'); 

    // Add the select element 
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum); 
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum); 

    $('#addMenu_article' + num).after(newSelect); 
    $(newSelect).before('<br />'); 


}); 

Answer 3

DOM 이벤트 처리기 트랩을 실행 한 것처럼 들립니다. 이 문제는 jQuery 이벤트를 처리 한 적이 있다면 더 합리적입니다.

$(".images").click(myFunc); 

jQuery를가는 셀렉터와 일치하는 모든 요소를 ​​발견하고이 (약) 코드를 사용하여, onclick 이벤트에 기능 myFunc 결합이다 : 당신이 할 때

기본적으로, 어떤 일이 발생

element.onclick = myFunc; 

(실제로 뭔가 더 복잡 않지만, 단지 그것이 무엇을 먹으 렴 가정)

을하고 실행할 때 발생 위의 코드와 그때에만 DOM에 추가 된 모든 추가 요소에는 해당 이벤트가 추가되지 않습니다. jQuery는 추가하지 말았습니다!

그러나 모두 손실되지는 않습니다. 기존의 및 미래의 모든 요소에 바인딩하기 위해 jQuery에서 화려한 .live() 함수를 사용할 수 있습니다. 새 요소를 수동으로 리 바인드해야하고 오류가 발생하기 쉬운 것보다 간단하고 사용하기 쉽습니다. 한 가지 사소한 단점은 이벤트 주문에 방해가되며 .bind()과 같은 인터페이스를 사용해야하므로 대신 .live("click", myfunc)을 사용하십시오.

질문을 더 읽기에 비추어

, 문제가 당신이 가지고 있다는 것 같다 편집은 #editSub2에 바인딩했지만 #editSub<n> 그래서 jQuery를 사용하면 약에 무엇인지 모르고있다 생성하는 것입니다 . 클래스를 사용하여 공통 기능을 요소에 푸시하고 고유 요소에 대한 ID를 사용하는 것이 더 효율적입니다.