jQuery动态复选框事件处理

从JSON回复中附加HTML时，事件处理程序似乎失去其事件绑定。在使用.live()函数时，处理程序现在似乎工作。jQuery动态复选框事件处理

$.each(result[0], function(i,wellList) { 
    $jsonResult = wellList["@name"]; 
    $uid = wellList["@uid"]; 
    $dynamicCheckBoxDiv += '<input type="checkbox" name="checkbox-1" value="'+ $uid 
     + '" class="wellCheck" id="checkbox-'+i+'" />' + 
     '<label for="checkbox-'+i+'">' + $jsonResult + '</label>';    
}); 
$dynamicCheckBoxDiv += '</fieldset></div>'; 

//Append results to div 
$("#dynamicCheck").append($dynamicCheckBoxDiv).page(); 

$(".wellCheck").live('click', (function() {

此事件现在会在点击功能运行时触发。然而，点击复选框几次后，它会随机将检查与错误框关联起来，并通过一次单击就开始触发点击事件触发。有没有人见过这个？

另外：如何添加一个方法来检查单独按钮中的所有框？因为他们被动态地添加它似乎只是绕过此功能：

// When select No wells is clicked this method is run 
$('#selectNone').click(function() { 
    $('#dynamicCheck .wellCheck').find(':checkbox').attr('checked', 'checked'); 
});

它进入的方法，但似乎没有任何检查的箱子。我已将jQuery和jQuery移动添加到此页面，并且这两种方法都存在于document.ready之下。

来源

2011-12-05 Colin Dawson

javascript有定义你知道的局部变量的方法... *** var *** - 请使用它们而不是污染范围。 – rlemon

变量是本地的。它们在每个之上被初始化（仍然在getJSON返回函数内）。每次我浏览'each'循环时，是否有理由重新创建变量？ –

不，对不起，我没有意识到 - 我认为你是在范围之外创建一个全局变量。 – rlemon

由于.wellCheck元素为复选框，因此不需要find(":checkbox")。只要这样做：

$("#selectNone").click(function(){ 
    $("#dynamicCheck .wellCheck").prop("checked", true); 
});

Demo。

来源

2011-12-05 15:56:18 Purag

+1为prop而不是attr和“no find” –

非常感谢，非常完美！仍然尝试哟习惯选择器。 –

第一位的解释是写入HTML侦听器仅适用于页面加载。无论何时您将原始HTML添加到页面，都必须专门设置任何侦听器。同样，只需更改“onclick”属性对听众不起作用。我怀疑你的问题与第二点有关，至少在我的阅读中，'$（“。wellCheck”）。live（...）'会影响你的每一个盒子每次都创建到目前为止。你可能会更好的服务的东西，如'$ dynamicCheckBoxDiv.live（...）'

我不完全清楚精确的语法 - 我工作更多克隆HTML而不是手动构建，所以你可能需要一个介入步骤将其渲染为DOM对象或其他东西（如果它不是已经存在的） - 但我怀疑这样的事情会有所帮助。此外，您可能希望使用'.click（...）'，而不是'.live（“click”，...）'。

来源

2011-12-05 16:06:30

您应该使用委托不住：

$("#dynamicCheck").delegate('.wellcheck','click', function(){ 
//stuff on click 
});

这将在该范围比身体是什么做生活得到更好的约束。

编辑：为复选框管理的一些例子显示方式：http://jsfiddle.net/h682v/3/

使用旧的ATTR（）和应该使用道具（）来代替，但原则仍然存在。

来源

2011-12-05 16:12:50

如果我使用该功能而不是我目前使用的功能，它甚至不会在点击时输入功能。有任何想法吗？ –

需要将事件更改为“更改”而不是单击（或另行添加）。您还可以添加其他事件，如“焦点”等，包括自定义事件。 –

只是为了不让别人感到困惑，这应该在选择器上有#selectOne而不是#dynamicCheck。作为乘法应用事件处理程序的原始问题的原因。 –

回答

相关问题