jQuery中的复杂问题答案

【问题标题】：Complex problem in jQueryjQuery中的复杂问题
【发布时间】：2010-08-12 15:12:47
【问题描述】：

我有一个问题困扰了我好几天。

我有一个 div，并且该 div 有一个可以隐藏的样式 (.copy { display: none; })。

我有一个链接（添加新链接），单击该链接时，会复制该 div 并删除“复制”类，从而导致 div 出现。

在这个 div 里面，我有 4 个复选框和一个文本输入。单击此复选框，值将显示在此输入文本中。

当我点击一次“添加新”时，他会确定，但如果我再次点击“添加新”链接，它会在 div 的第二个输入中显示所有复选框值，如果我再次点击“添加新”他开始将值放入第三个 div 的输入中......

解释起来比较复杂，不知道是不是说清楚了，把例子放到jsbinhttp://jsbin.com/eteyu3.

见：

仅单击“添加新”一次，然后单击复选框。然后再次点击“Add New”，看到它停止工作了。

我希望他只显示 div 对应复选框的值。

【问题讨论】：

您有多个具有相同 ID、名称等的实例。单击复选框时数字应显示在何处存在混淆。每组复选框都应该被唯一标识。
我没有看到任何使用 Firebug 在 30 分钟内无法解决的问题。（或 Dragonfly，或任何其他浏览器上的任何其他开发工具，甚至 IE）

标签： jquery html input

【解决方案1】：

http://jsbin.com/eteyu3/2

我这样改过，现在可以了。

jQuery(document).ready(function() {
  var $current = jQuery(this);

  jQuery(".add_new").bind("click", function() {
    var copy = jQuery(".copy").clone().insertBefore(".copy").removeClass("none").removeClass("copy");
    jQuery("input:checkbox", copy).click(function() {
      var val = [];
      jQuery(':checkbox:checked', copy).each(function(i) {
        val[i] = jQuery(this).val();
      });

      jQuery(".resultfinal", copy).val ( val );
    });

    jQuery(".count").val( jQuery(".opt:not(.copy)").length );
  });  
});

【讨论】：

谢谢。完美运行。

【解决方案2】：

虽然我正在解决这个问题......每个人都可以使用这个：http://jsfiddle.net/c8aHb/

【讨论】：

应该是评论，而不是答案。

【解决方案3】：

也许你的例子是人为的，但你的方法似乎比它需要的更复杂。无论如何，您的问题是您一遍又一遍地重新绑定所有复选框的单击事件，这将导致多个事件被触发。试试

unbind('click').bind('click')

点击绑定的位置

【讨论】：

【解决方案4】：

您可以使用.parent() 找到包含单击复选框的 div，然后在该父级中搜索您要填充的文本框。

jQuery($seletor + ':checkbox').click(function()
{
  var val = [], $parent = jQuery(this).parent();
  $parent.find(':checkbox:checked').each(function(i)
  {
    val[i] = jQuery(this).val();
  });

  $parent.find(".resultfinal").val ( val );
});

您也可以使用.live，而不用担心创建每个复选框时的绑定事件。您的代码将归结为：

jQuery.noConflict();

jQuery(document).ready(function()
{
  jQuery('div.opt :checkbox').live('click', function() {
    var val = [], $parent = jQuery(this).parent();
    $parent.find(':checkbox:checked').each(function(i) {
      val[i] = jQuery(this).val();
    });
    $parent.find('.resultfinal').val(val);
  });

  jQuery(".add_new").bind("click", function() {
    jQuery(".copy").clone().insertBefore(".copy").removeClass("none").removeClass("copy");
    jQuery(".count").val( parseInt(jQuery(".count").val()) + 1 );
  });  
});

【讨论】：

谢谢。完美运行。