Question

在页面加载时，我将事件处理程序与在页面加载时隐藏的内容绑定在一起。

如果用户点击该按钮，则会提取隐藏的内容并替换页面的主要内容。现在，最初绑定的事件处理程序不起作用。

页面加载上的HTML代码

<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>

用户点击按钮后，新的dom看起来像这样

<p>
 <div>Some Hidden content</div>
</p>

在操作之后，绑定到div元素的事件处理程序不再起作用。请注意，在DOM操作之后，div进入P元素。

jQuery代码：

   $('#button').click(function(){
      var show_later = $('.show-later').html();
      $('p').html(show_later);
   });

   $(document).ready(function(){
      $('.show-later').click(function(){
       // Do something.....
      });
   });

Answer 1

您没有移动<div>，您只是将其内容（文本节点）转移到段落中。与你在问题中所说的相反，生成的DOM实际上看起来像这样：

<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>

<div>仍然存在，它仍然有内容，并且它仍然有click的事件处理程序绑定到它;但它仍然是隐藏的，所以你无法点击它。

我建议您实际将<div>移动到<p>元素中，如下所示：

$('.show-later').show().appendTo('p');

这将选择<div>，使其可见，然后将元素本身移动到<p>。

Answer 2

如果你这样做

var show_later = $('.show-later').html();
$('p').html(show_later);

然后绑定到.show-later的事件处理程序将不会绑定到p。您所做的只是更改p的内容。我建议改变HTML：

<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>

和javascript一样：

$('.show-later').show();
$('.hide-later').hide();

Answer 3

您是否尝试过像这样更改代码？

$(document).ready(function(){
    $(document).on('click', '.show-later', function(){
        // Do something.....
    });
});

<强> UPDATE2 ：

$('#button').click(function(){
    var show_later = $('.show-later').html();
    $('p').html(show_later).addClass('show-later');
});

Update1 ：我不确定，你的问题究竟是什么。也许你想制作一个jsfiddle-example ......

'on'-Method注册事件，这样即使你删除了一个新的元素，事件也已经注册。

事件处理程序在DOM操作后不起作用

3 个答案: