[英]how to replace element contents with new html without loosing javascript function?
I'm trying to do is replace the contents of $('#product_blocks') with new html while preserving the jQuery listeners events on a similar element id. 我试图做的是用新的html替换$('#product_blocks')的内容,同时在类似元素id上保留jQuery侦听器事件。
var thenewhtml= '<div id="clickme">hello this text will be replace on click</div>';
$('#product_blocks').html(thenewhtml);
the jquery event: jQuery事件:
$( "#clickme" ).click(function() {
$("#clickme").html("yayImChanged");
});
BUT my problem is once I replace #products_block with new html, $("#clickme" ) does not work.. does not carry forward to new html... This is what I'm looking to solve. 但是我的问题是,一旦我用新的html替换#products_block,$(“#clickme”)将无法正常工作..无法继续使用新的html ...这就是我要解决的问题。
Because the page structure looks the same - it's only the content of the span
that's been changed - you can select the new content of the span, and replace the old span's content with it: 因为页面结构看起来相同-只是span
的内容已更改-您可以选择跨度的新内容,并用它替换旧的跨度内容:
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>
This will preserve any listeners on #userclickedhere
. 这将保留#userclickedhere
上的所有侦听#userclickedhere
。
(of course, you also need to use .html
on jQuery collections to set their HTML - .innerHTML
is a method on native DOM elements , which are not the same thing) (当然,您还需要在jQuery集合上使用.html
来设置其HTML- .innerHTML
是本机DOM元素上的一种方法,这不是一回事)
You can use jQuery .on()
method signature for defining event handlers eg 您可以使用jQuery .on()
方法签名来定义事件处理程序,例如
$(document).on('click', '#userclickedhere', yourClickHandlerFunction);
jQuery .on() doc jQuery .on()文档
Updated Answer: It will still work. 更新的答案:它仍然可以工作。
$(document).on('click', '#clickme', function(e) {
$(this).html("yayImChanged");
});
You can use DOMSubtreeModified : 您可以使用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>
When jQuery registers an event, it looks for that selector in DOM. jQuery注册事件时,它将在DOM中查找该选择器。 it will only register events for only available DOM elements. 它只会为仅可用的DOM元素注册事件。
Here, you are adding thenewhtml later the jQuery registered the events. 在这里,您要添加thenewhtml,稍后jQuery会注册事件。 Hence, you have to register click event on #clickme again once after you replace the HTML. 因此,替换HTML后,您必须再次在#clickme上注册click事件。 just after the line: $('#product_blocks').html(thenewhtml); 在该行之后:$('#product_blocks')。html(thenewhtml);
This is the flow of jQuery click event on particular selector. 这是特定选择器上jQuery click事件的流程。
But, there's also an another way to register events on those html elements which do not exist in DOM when page load. 但是,还有另一种方法可以在页面加载时在DOM中不存在的html元素上注册事件。 ie $(document).on() method. 即$(document).on()方法。
here you can do it both the ways. 在这里,您可以同时使用两种方法。 1. define click event after replacing html in #product_blocks. 1.替换#product_blocks中的html后,定义点击事件。 2. define click event using $(document).on() anywhere. 2.在任何地方使用$(document).on()定义点击事件。
$(document).on('click','#clickme',function() {
/* your code here */
});
or 要么
$('#product_blocks').html(thenewhtml);
$('#clickme').click(function() {
$(this).html("yayImChanged");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.