1

我有一个简单的表单，它有一个列表（从数据库生成的下拉列表），当用户进行选择时，选择会打印在屏幕上。我遇到的问题是，如果我在页面加载时使用 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

但我仍然卡住了，因为当有变化时它仍然没有进入功能......

4

2 回答 2

1

您的第二个代码片段查找与 #categoryList 匹配的所有元素，并将函数绑定到更改事件。问题是当时没有#categoryList 元素，因为您稍后会创建它。因此，您需要在创建列表后进行绑定。

于 2009-08-12T18:10:45.623 回答
0

我找到了一种稍后使用 xajax 进行绑定的方法。由于某种原因，在 jquery 文件中我无法将此函数与新的下拉列表绑定。我的解决方案是在addDropdownMenu函数中使用 xajaxResopnse->addScript(script) 添加 jquery 脚本，如下所示

函数 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->addScript($javascript);添加 jquery 脚本.

于 2009-08-13T16:46:02.927 回答