jquery를 사용하여 생성할 때 DB 생성 목록이 작동하지 않습니다.

Question

사용자가 선택하면 선택 항목이 화면에 인쇄되는 목록(DB에서 생성된 드롭다운 목록)이 있는 간단한 양식이 있습니다.내가 겪고 있는 문제는 페이지가 로드될 때 목록을 생성하는 PHP funciton을 호출하기 위해 jquery를 사용하면 목록이 작동하지 않지만 HTML에 직접 코드를 추가하면 작동한다는 것입니다.

페이지가 로드되면 드롭다운 목록이 다음과 같이 호출됩니다.

$('#createDropDown').ready(function(){
        id = $('#createDropDown').val(); 
        // this calls a php function that creates a dropdown list from the DB
        // the dropdown's id = 'categoryList'
        xajax_addDropdownMenu(id);


});

목록은 다음과 같이 생성됩니다. id = '카테고리리스트', "createDropDown"이라는 createDropDown DIV에 올바르게 추가됩니다.지금까지는 모든 것이 괜찮아 보였습니다!문제는 새로 생성된 목록(categoryList)에서 선택을 하면 다른 Jquery가 호출될 때 발생합니다.

선택이 이루어지면 다음 코드가 호출되어야 합니다:

$('#categoryList').change(function() {
    bucket_id = $('#categoryList').val(); 
    var selected = "";
    // get selected value from the dropdown menu
        $("#categoryList option:selected").each(function () {
            selected += $(this).text() + " ===>";
         });
        // if we have a valid ID print it in the screen.
        if(bucket_id!= 0)
        {
            xajax_addCategory(selected);
        }
     });

xajax_addCategory(선택됨); 선택한 항목을 화면에 인쇄합니다.하지만 작동하지 않습니다.

메모:main.html 파일에서 직접 드롭다운을 생성하기 위해 php 함수를 호출하면 제대로 작동하므로 목록이 올바른 ID로 생성되고 작동한다는 것을 알지만 Jquery를 사용하여 로드 시 php 메서드를 호출하면 , 작동하지 않습니다 ...왜 그런지 이해가 안 돼요.

추신: 저는 Jquery를 잘 모르는 사람이므로 통찰력을 얻을 수 있다면 매우 환영할 것입니다!

---

업데이트:

목록이 다음과 같이 생성된 후 바인딩을 생성해 보았습니다.

 
$('#createDropDown').ready(function()
    { 
        id = $('#createDropDown').val();  
        xajax_addDropdownMenu(id); 
        $("#categoryList0").bind('change',function() 
        { 
            console.log('The code goes here!!'); 
        }); 
    }); 
 

어디 CategoryList0은 ID입니다. 새로운 목록의.목록의 클래스는 CategoryList입니다.

하지만 변경 사항이 있을 때 여전히 기능에 들어가지 않기 때문에 여전히 멈춰 있습니다...

Answer 1

두 번째 코드 조각은 #categoryList와 일치하는 모든 요소를 ​​찾고 함수를 변경 이벤트에 바인딩합니다.문제는 나중에 생성하기 때문에 그 당시에는 #categoryList 요소가 없다는 것입니다.따라서 목록이 생성된 후에 바인딩을 수행해야 합니다.

Answer 2

나중에 Xajax를 사용하여 바인딩을하는 방법을 찾았습니다. jQuery 파일의 어떤 이유로 든 새로운 드롭 다운 으로이 기능을 바인딩 할 수있었습니다. 내 솔루션은 AddDropdownMenu 이렇게 funciton

함수 addDropdownMenu ($ id) {

  $xajaxResponse = new xajaxResponse();

  $html = /* CODE TO GENERATE LIST HERE */ ; 


  $javascript = /*"*///commented out " to visualize code better
    $('#categoryList').bind('change',function categoryListChange() 
    {
     
      //get selected value from the dropdown menu
      var selected = "";
      $("#categoryList option:selected").each(function () 
      {
        selected += $(this).text();
       });

      bucketId = $('#categoryList').val(); 

      if(bucketId!= 0)
      {
        xajax_addCategory(selected);
      }

    });"";

  $xajaxResponse->addAppend("categoryListContainer", "innerHTML", $html);

  $xajaxResponse->addScript($javascript);

  return $xajaxResponse;  

}

이와 같은 새 목록에 대한 바인드를 먼저 수행합니다. $ ( '##car 그런 다음 jQuery 스크립트를 추가합니다 $ xajaxResponse-> addScript ($ javaScript);.