Question

我有一个简单的表单，其中包含一个列表（从DB生成的下拉列表），当用户进行选择时，选择将打印在屏幕上。我遇到的问题是，如果我使用jquery调用在页面加载时生成列表的php函数，列表将无法正常工作，但如果我直接在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 ='categoryList'生成列表，并将其正确附加到名为“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（已选择）; 在屏幕上打印所选项目。但是没有用。

注意：如果我调用php函数直接在main.html文件中生成下拉列表，这可以正常工作，所以我知道列表是使用正确的ID生成的并且它可以工作，但是当我使用Jquery调用时加载php方法，它不起作用......我不明白为什么。

PS我是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匹配的所有元素，并将函数绑定到change事件。问题是当时没有#categoryList元素，因为您稍后会创建它。因此，您需要在创建列表后进行绑定。

Answer 2

我后来找到了一种使用xajax进行绑定的方法。出于某些原因，在jquery文件中我无法将此函数与新的下拉列表绑定。我的解决方案是在 addDropdownMenu 功能中使用xajaxResopnse-＆gt; addScript（脚本）添加jquery脚本

function 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;  

}

首先为新列表执行绑定，例如 $（'＃categoryList'）。bind（'change'，function categoryListChange（）{...} 然后通过 $ xajaxResponse-＆gt; addScript（$ javascript）; 添加jquery脚本。

使用jquery创建时，DB生成的列表不起作用

2 个答案: