Question

我想做的是用新的html替换$（'＃product_blocks'）的内容，同时在类似元素id上保留jQuery侦听器事件。

var thenewhtml= '<div id="clickme">hello this text will be replace on click</div>';

$('#product_blocks').html(thenewhtml);

jquery事件：

$( "#clickme" ).click(function() {

$("#clickme").html("yayImChanged");

});

但是我的问题是，一旦我用新的html替换#products_block，$（“＃clickme”）不起作用..无法继承到新的html ...这就是我要解决的问题。

Answer 1

因为页面结构看起来相同-只是span的内容已被更改-您可以选择跨度的 new 内容，然后将旧跨度的内容替换为它：

const $userclickedhere = $('#userclickedhere');
$userclickedhere.on('click', () => console.log('click'));

const thenewhtml = `<span id="userclickedhere">new data</span>`
const newSpanContent = $(thenewhtml).text();
$userclickedhere.text(newSpanContent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product_blocks">  <span id="userclickedhere">click me</span> </div>

这将保留#userclickedhere上的所有侦听器。

（当然，您还需要在jQuery集合上使用.html来设置其HTML-.innerHTML是本机DOM元素上的方法，这是不相同的东西）

Answer 2

您可以使用jQuery .on()方法签名来定义事件处理程序，例如

$(document).on('click', '#userclickedhere', yourClickHandlerFunction);

jQuery .on() doc

更新的答案：仍然可以。

$(document).on('click', '#clickme', function(e) {
  $(this).html("yayImChanged");
});

Here is a CodePen demo

Answer 3

您可以使用DOMSubtreeModified：

const newHtml = '<div id="clickme">hello this text will be replace on click</div>';
const attachEventClickHandler = () => $('#clickme').one('click', () => {
  console.log('Clicked...');
  $('#product_blocks').html(newHtml);
  $('#clickme').on('click', () => {
    console.log('yayImChanged...');
    $('#clickme').html('yayImChanged');
  });
});
$('#product_blocks').one('DOMSubtreeModified', () => attachEventClickHandler());
attachEventClickHandler();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="product_blocks"> <span id="clickme">click me</span> </div>

Answer 4

当jQuery注册事件时，它将在DOM中查找该选择器。它只会为仅可用的DOM元素注册事件。

在这里，您要添加 thenewhtml ，稍后jQuery会注册事件。因此，替换HTML后，您必须再次在#clickme上注册click事件。在该行之后：$（'＃product_blocks'）。html（thenewhtml）;

这是特定选择器上的jQuery click事件的流程。

但是，还有另一种方法可以在页面加载时在DOM中不存在的html元素上注册事件。即$（document）.on（）方法。

在这里您可以同时使用两种方法。 1.替换#product_blocks中的html后，定义点击事件。 2.在任何地方使用$（document）.on（）定义点击事件。

$(document).on('click','#clickme',function() {
     /* your code here */
});

或

$('#product_blocks').html(thenewhtml);
$('#clickme').click(function() {
    $(this).html("yayImChanged");    
});

如何用新的html替换元素内容而不丢失javascript功能？

4 个答案: