jQuery替换div停止响应鼠标点击答案

【问题标题】：jQuery replaced div stops responding to mouseclickjQuery替换div停止响应鼠标点击
【发布时间】：2010-11-09 17:48:15
【问题描述】：

我正在尝试替换下拉框中的值。替换工作正常（在这个优秀社区的帮助下），但之后幻灯片功能停止工作。我找不到任何错误，所以我问这是否与 jQuery 和 javaScript 的工作方式有关？加载时元素是否“映射”到 DOM，如果是的话；这是否意味着用另一个 div 替换一个 div 会导致 jQuery 失去对 div 的跟踪？

我使用这段代码来检查一个 div 是否被点击：

$(document).ready(function () {

    $('.button_slide').click(function () {
        var num = $(this).attr('rel');
        $('div.content_slide:not(.' + num + ') ').slideUp(400);
        $('div.' + num).slideToggle(400);
    });
    return false;
});

这是 div：

<div class="button_slide" rel="slide1">Alts:</div>
<div class="content_slide slide1">
  <input id="Button1" rel="slide1" class="button_vertical click_button" type="button" value="2" size="10px" />
  <input id="Button2" rel="slide1" class="button_vertical click_button" type="button" value="3" />                                                    
</div>

这是下拉框的jQuery：

        $(function () {

            $('.click_button').click(function () {

                var num = $(this).attr('rel');

                $('.button_slide[rel="' + num + '"]').replaceWith("<div class='button_slide' rel='" + num + "' >" + $(this).val() + "</div>");
                $('div.content_slide').slideUp(600);
            });
        });

我在这个问题上大发雷霆，而 jQuery 并不是我的强项…… 你会如何解决这个问题？

【问题讨论】：

查看演示。 Click 如何在添加的 div 上工作 api.jquery.com/live

标签： asp.net jquery html

【解决方案1】：

click 函数将处理程序添加到 jQuery 对象中的元素当前。
新的替换元素没有任何处理程序。

您需要调用.live，它会为所有匹配选择器的元素添加一个处理程序，无论它们何时被创建。

例如：

$('.click_button').live('click', function() {
    ...
});

【讨论】：

【解决方案2】：

jQuery bind 调用（例如click）绑定到特定元素。如果替换一个这样的元素，任何绑定到它的处理程序都将被删除。

解决此问题的最简单方法是使用delegate 语法。这使用了一种称为事件冒泡的 Javascript 功能，这意味着在 DOM 树上的事件也会被通知子元素上的事件。这允许您绑定到父元素（例如 document.body 或更接近的共同祖先，具体取决于您的 HTML）并在那里等待子元素上的事件：

$(document).ready(function () {
    $(document.body).delegate('.button_slide','click', function () {
        var num = $(this).attr('rel');
        $('div.content_slide:not(.' + num + ') ').slideUp(400);
        $('div.' + num).slideToggle(400);
    });
    return false;
});

【讨论】：

【解决方案3】：

试试这个：

$('.click_button').live('click', function() {
   ... your code... 
});

Delegate 更好，但既然你说 jQuery 不是你的强项，我们暂时不会去那里 :)

基本上，在您绑定事件处理程序时，新的 DIV 并不存在。 Live() 通过将单个事件处理程序绑定到文档并在事件发生时搜索匹配项，为所有当前和未来的 div 绑定事件处理程序。

希望这会有所帮助。

【讨论】：