单击事件动态生成的数据属性不起作用

-1

我的问题是data-list的compare类是动态生成的，并且我已经在compare div上实现了点击处理程序。
仅在每次点击时data-list数组发生更改，因此我无法弄清楚如何在每次点击时获取更新的数据列表值。单击事件动态生成的数据属性不起作用

我了解委托事件，但无法弄清楚如何在这里使用：

$('.compare').on('click','what-to-put-here?',function (e) { 
var data = $(this).data('list'); 
alert(data); 
}); 

<div class="compare" id = "compare-box" data-list = ""> 
    <div class = "a" style="margin-bottom: 5px;padding: 0px;font-size:13px"> 
    <h4>Compare Results (<span id="compare-items"></span>)</h4> 
    </div> 
</div>

的jsfiddleGuys Check My Code

来源

2017-05-10 parvez

您委派与'$（文件）。在文档最坏情况（ '点击'， '.compare'，函数（）{...'。请参阅http://api.jquery.com/on/#direct-and-delegated-events – j08691

单击事件未调用 – parvez

您确定显示的'div'元素已添加到DOM当JS代码处理程序被调用？ –

我已经改变了你的小提琴有点希望它会帮助:)

var count = 0 
 
var list = $("#compare-box").attr('data-list'); 
 
if(list) 
 
{ 
 
\t list = JSON.parse(list); 
 
} 
 
else 
 
{ 
 
\t list = []; 
 
} 
 
$(".compare-result").on('click',function(){ 
 
\t //var list = 
 
\t 
 
\t if($(this).is(":checked")) 
 
\t { 
 
\t \t if(count < 4) 
 
\t \t { 
 
\t \t \t var id = $(this).val(); 
 
\t \t \t list.push(id); 
 
\t \t \t count++; \t \t 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t $('input.compare-result').not(':checked').attr("disabled",true); 
 
\t \t \t alert('you can only compare 4 items'); 
 
\t \t } 
 
\t } 
 
\t else 
 
\t { 
 
\t \t var id = $(this).val(); 
 
\t \t count--; 
 
\t \t if(count < 4) 
 
\t \t { 
 
\t \t \t var index = list.indexOf(id); 
 
\t \t \t if (index > -1) { 
 
\t \t \t \t list.splice(index, 1); 
 
\t \t \t } 
 
\t \t \t $('input.compare-result').not(':checked').attr("disabled",false); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t alert('error'); 
 
\t \t } \t 
 
\t } 
 
\t selectedList = JSON.stringify(list); 
 
\t $("#compare-items").html(count); 
 
\t console.log(selectedList); 
 
}); 
 

 

 
//Main Problem Starts 
 

 
$('.compare').on('click',function (e) { 
 
    var data2 = ''; 
 
    $(".compare-result:checked").each(function(){ 
 
     data2 += $(this).val()+","; 
 
    }); 
 
    data2 = data2.substring(0,data2.lastIndexOf(",")); 
 
    alert(data2); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="compare-result" value = "1">a 
 
<input type="checkbox" class="compare-result" value = "2">b 
 
<input type="checkbox" class="compare-result" value = "3">c 
 
<input type="checkbox" class="compare-result" value = "4">d 
 
<input type="checkbox" class="compare-result" value = "5">e 
 

 

 
<div class="compare" id = "compare-box" data-list = ""> 
 
    <div class = "a" style="margin-bottom: 5px;padding: 0px;font-size:13px"> 
 
    <h4>Compare Results (<span id="compare-items"></span>)</h4> 
 
    </div> 
 
</div>

来源

2017-05-10 15:27:17

耶感谢再次 – parvez

建议其他替代，它的工作就像一个魅力，谢谢）欢迎您 –

遵循以下语法

jQuery(document.body).on('click', '.compare', function(){ 
    alert('what ever you want to do here'); 
    return false; 
});

来源

2017-05-10 14:42:39

都能跟得上它不工作，仍返回从第一次点击事件 – parvez

的第一个值，请分享更多的代码，这样我就可以帮助 –

可以请你分享小提琴或创建代码段，这样我可以检查的确切问题 –

你需要用你的代码在document.ready处理程序中，以确保在附加y时将元素全部加载到DOM中我们的事件处理器如果在一个单独的文件，你仍然可以使用处理器不要紧：

$(document).ready(function() { 
    $('.compare').on('click','what-to-put-here?',function (e) { 
    var data = $(this).data('list'); 
    alert(data); 
    }); 
});

来源

2017-05-10 14:51:54

当设置数据，您需要使用

$(selector).data("name", value)

而不是$(selector).attr("data-name", value)

更新小提琴：https://jsfiddle.net/DTcHh/32488/

来源

2017-05-10 15:20:30

单击事件动态生成的数据属性不起作用

回答

相关问题