Question

我正在研究jQuery Mobile。

我有一个视图，我在其中显示正在动态加载的collabsible列表。因此，我的jQuery文件获取JSON数据，在$('mylist').append(..data for each row..)周围运行循环。

现在在每个可折叠项目中，我添加了一个按钮，该按钮必须与参数一起运行JavaScript函数。这是我被困的地方。不知何故，事件不会在点击时触发。是因为没有生成事件或我在变量中传递的参数是主要问题。

$('#main')
  .bind("pageshow", function (event) { 
    var cusid = getUrlVars()["cusid"]; 
    var locid = getUrlVars()["locid"]; 
    $.getJSON("localhost/mserv/Offers.php";, function(data) { 
      $.each(data, function(index, offer){ 
        $('#cat_list').append("<div align='center' data-role='collapsible'><h3>offer.name</h3><p>offer.price</p><input type= 'button' onclick='addItem("+offer.id+",'"+offer.name+"',"+offer.price+")' value='Add To Cart'></div>"); 
      }); 
    $('#cat_list').collapsibleset('refresh'); 
  });

Answer 1

我想我知道可能是什么问题，但实际上你没有提供足够的信息（特别是你使用的代码）：

jQuery mobile总是通过AJAX向DOM添加元素。如果要将事件侦听器添加到通过AJAX添加到DOM的元素，则需要使用on()而不是click()。

所以替换

$('clickableElement').click(function() {
    ...
});

与

$('clickableElement').on('click', function() {
    ...
});

这样你就可以将click-eventlistener绑定到你的元素，即使它最初加载（首次调用你的页面）时它不存在，只要它通过AJAX添加到DOM中就会存在。

在jquery中不触发按钮单击事件

1 个答案: