Question

我很抱歉，如果这不清楚，但我在概念化我想要的东西时遇到了问题。

我正在使用像这样的div列表

  <div id="1" class="ajax_category">
     <p> Blah </p>
  </div>

当点击div id时，有一个javascript设置为对url发出ajax请求。这工作正常，但我不得不重复自己为页面上的每个div。这是javascript片段......

 $('#1').bind('pageAnimationEnd', function(e, ajax_item_1){
 if (!$(this).data('loaded')) {
    $(this).append($('<div><img class="loading" src="../../img/loading.gif"><div>').
      load('ajax/load_item/1 #ajax_item_1', function() { 
        $(this).parent().data('loaded', true);
       }));
      }
     });

我想以某种方式修改此脚本，通过单击div的类来触发，然后将加载div附加到该div的id。抓住div id并使ajax请求引用jq'load'url中的div id。

如果不清楚或者您有任何其他问题，请告诉我。

谢谢，彼得

Answer 1

改为绑定到“div.ajax_category”。然后，使用您在事件参数中获得的元素的ID。创建你需要的字符串：

var toLoad = "ajax/load_item/" + elementId + " #ajax_item_" + elementId;

您可以在jquery中使用较新的“委托”事件处理做得更好。它避免了在许多元素上调用“bind”所涉及的大量成本。

Answer 2

您应该可以使用delegate执行此操作：

$('#container').delegate('.ajax_category','click',function(){
    if (!$(this).data('loaded')) {
        $(this).append(
            $('<div><img class="loading" src="../../img/loading.gif"><div>')
                .load(
                    'ajax/load_item/' + this.id + ' #ajax_item_' + this.id, 
                    function() {
                        $(this).parent().data('loaded', true);
                    }
                )
        );
    }
});

请注意，这假设您的课程ajax_category的元素包含在ID为container的div中。

与绑定到ajax_category本身相比，它具有显着的性能优势，因为它只涉及一个绑定，而不是几个绑定。绑定在性能方面相对昂贵。

jquery使用元素id加载

2 个答案: