Question

我正在尝试替换下拉框中的值。替换工作正常（在这个优秀社区的帮助之后），但之后滑动功能停止工作。我找不到任何错误，所以我问这是否与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不是我强大的一面...... 你会如何解决这个问题？

Answer 1

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

你需要调用.live，它会在创建时为所有与选择器匹配的元素添加处理程序。

例如：

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

Answer 2

试试这个：

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

代表是更好但是因为你说jQuery不是你强大的一面，我们现在不会去那里:)

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

希望这有帮助。

Answer 3

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

最简单的方法是使用delegate语法。这使用了一个名为event bubbling的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;
});

jQuery替换div停止响应鼠标单击

3 个答案: