2

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

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

页面加载时的 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.....
      });
   });
4

3 回答 3

2

您没有移动<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>.

于 2012-12-18T09:37:48.413 回答
1

如果你这样做

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();
于 2012-12-18T09:43:19.410 回答
1

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

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

更新2：

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

Update1：​​我不确定，你的问题到底是什么。也许您想制作一个 jsfiddle 示例...

'on' 方法注册事件，因此即使您删除元素并创建一个新元素，事件也已注册。

于 2012-12-18T09:43:26.710 回答