Question

我有一个应该在点击productid时触发的功能......

$("[id^='productid']").click(function(){
            var numberPattern = /\d+/g;
            match = this.id.match(numberPattern)
        })

使用Jquery分页生成产品，如下所示....

function createproducts(jsondata){
            transactiondata = jsondata
            $("<div id='product-container'></div>").appendTo("#product-list");
            $('#pagination').pagination({
             items: jsondata.length
            ,itemsOnPage: 12
            ,onInit:redrawData
            ,onPageClick: redrawData
            ,cssStyle: 'light-theme'});
        }

        function redrawData(pageNumber,event){
            if (pageNumber) {
                slicedata = transactiondata.slice(pageNumber*12,
                        Math.min((pageNumber+1)*12,transactiondata.length));
            }
            else {
                slicedata = transactiondata.slice(0,12) 
            }

            $("#product-container").empty()
            slicedata.forEach(function(e,i,a){
                var obj = e;
                $("<div id = productid" + i + " class = product-cards </div>").appendTo('#product-container')
                //-working$("<div id='product" + i + "left'  class='product-cards-left' style='background-image:url(  " + imagepath_start + obj.image_caption + ")'> </div>").appendTo('#product' + i);
                //lightbox is the jquery plugin that we use..The below line is very sensitive...
                //-lightbox working$("<a href= " + imagepath_start + obj.image_caption + " data-lightbox="+ imagepath_start + obj.image_caption+"> <div id='product" + i + "left'  class='product-cards-left' style='background-image:url(  " + imagepath_start + obj.image_caption + ")' > </div></a>").appendTo('#product' + i);
                $("<div id='product" + i + "left'  class='product-cards-left' style='background-image:url(  " + imagepath_start + obj.image_caption + ")'> </div>").appendTo('#productid' + i);
                $("<div id = product" + i + "right class = product-cards-right> </div>").appendTo('#productid' + i   )
                $("<label><b>  Price: <b></label>  <label>" + '$' + obj.price + "</label><br>").appendTo('#product' + i +"right"   )
                $("<label><b>  Old Price: <b></label>  <label>" + '$' + obj.old_price + "</label><br>").appendTo('#product' + i +"right"   )
                $("<label><b>  Author Name: <b></label>  <label>" + obj.author_name + "</label>").appendTo('#product' + i +"right"   )
                $("<div id= elementid style='display:none' >"+ obj.id+" </div>").appendTo('#product' + i +"right"   )
                //$("<label>" + obj.name + "</label>").appendTo('#product' + i +"right"   )
            })

问题： -

当我点击productid时，点击功能正常工作并计算＆＃34;匹配＆＃34;正确..但是一旦我移动到下一页（Onpageclick被触发）并点击productid，点击功能就不再有效了。为什么会发生这种情况？

Answer 1

您可以使用$(document)处理程序，以便您的点击处理程序不会丢失。

$(document).on("click", "[id^='productid']", function(){
        var numberPattern = /\d+/g;
        match = this.id.match(numberPattern)
    });

Answer 2

您需要使用这样的委托事件处理程序：

$(document).on("click", "[id^='productid']", function(){
    var numberPattern = /\d+/g;
    match = this.id.match(numberPattern)
});

通过监听冒泡到不变的祖先元素的事件，然后在导致事件的元素链上应用jQuery选择器，然后适用导致事件的任何匹配元素的函数。

您通常会将委派的事件附加到最近的不变的祖先元素，但如果没有什么方便使用，则回退为document。不要将body用于委派事件，因为它有一些事件的错误（由于样式）。

Answer 3

当您更改页面时，您丢失了钩子jquery添加了触发点击的DOM。只需回忆一下监听页面更改点击的方法。

单击功能未在Jquery中正确注册

3 个答案: