blocks|key|316107|text|您需要附加jQuery对象，而不仅仅是设置内部的HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316108|var+html+=+$('<div><a+href="#"+id="test">Btn</a></div>');
html.find("#test").click(function(){
++console.log("clicked");
});
//later
$(htmlNode).append(html);|code-block|syntax|javascript|316109|编辑：为了更清楚起见，使用append而不是html，即使在传入jQuery对象时html在功能上与.empty().append(val)等效。|offset|length|style|BOLD|CODE|316110|entityMap^0|0|0|0|2|D|6|M|4|15|4|1E|K|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@$I|S|J|T|K|L]|$I|U|J|V|K|M]|$I|W|J|X|K|M]|$I|Y|J|Z|K|M]|$I|10|J|11|K|M]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|O|$]]

<p>You need to append the jQuery object, rather than just setting the inner HTML:</p>

<pre><code>var html = $('&lt;div&gt;&lt;a href="#" id="test"&gt;Btn&lt;/a&gt;&lt;/div&gt;');
html.find("#test").click(function(){
  console.log("clicked");
});
//later
$(htmlNode).append(html);
</code></pre>

<p><strong>EDIT</strong>: Use <code>append</code> instead of <code>html</code> to be more clear, even though <code>html</code> seems to functionally equivalent to <code>.empty().append(val)</code> when passing in a jQuery object.</p>


blocks|key|316832|text|问题是，您正在将单击事件绑定到DOM中还不存在的对象，并且它不是jQuery对象。您可以采取两种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316833|1)使用Live：|316834|$("#test").live('click',+function(){
++console.log("clicked");
});
//later
var+html+=+'<div><a+href="#"+id="test">Btn</a></div>';
$(htmlNode).html(html);|code-block|syntax|javascript|316835|2)构造一个合适的jQuery+DOM对象，并绑定到该对象上。|316836|var+a+=+$('<a></a>').attr('href',+'#').click(function()+{
++console.log("clicked");
});
//later
$(htmlNode).html(a.wrap('<div></div>').html());+//This+could+also+use+append+or+appendTo.|316837|最好的方法取决于你的情况。一定要考虑到，在JavaScript中附加到DOM是非常昂贵的！|316838|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The issue is that you're binding a click event to something that isn't in the DOM yet and isn't a jQuery object.  You can take two approaches.</p>

<p>1) Use Live:</p>

<pre><code>$("#test").live('click', function(){
  console.log("clicked");
});
//later
var html = '&lt;div&gt;&lt;a href="#" id="test"&gt;Btn&lt;/a&gt;&lt;/div&gt;';
$(htmlNode).html(html);
</code></pre>

<p>2) Construct a proper jQuery DOM object, and bind to that.</p>

<pre><code>var a = $('&lt;a&gt;&lt;/a&gt;').attr('href', '#').click(function() {
  console.log("clicked");
});
//later
$(htmlNode).html(a.wrap('&lt;div&gt;&lt;/div&gt;').html()); //This could also use append or appendTo.
</code></pre>

<p>The best approach depends on your situation.  Be sure to consider that appends to the DOM are very expensive in JavaScript!</p>


blocks|key|4008498|text|您只是将单击事件附加到html..you，而不是实际触发单击事件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4008499|尝试在附加事件后调用.click()。|offset|length|style|CODE|4008500|entityMap^0|0|A|8|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>you are only attaching the click event to the html..you are not actually firing off the click event</p>

<p>try calling <code>.click()</code> after you attach the event.</p>


blocks|key|316890|text|它应该是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316891|$(htmlNode).html(html).filter("#test").click(function(){
++console.log("clicked");
});|code-block|syntax|javascript|316892|或者你可以这样做：|316893|$("#test").live('click',function(){
++++console.log("clicked");
});|316894|并稍后创建您的html|316895|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>It should be:</p>

<pre><code>$(htmlNode).html(html).filter("#test").click(function(){
  console.log("clicked");
});
</code></pre>

<p>Or you can do:</p>

<pre><code>$("#test").live('click',function(){
    console.log("clicked");
});
</code></pre>

<p>And create your html later</p>


blocks|key|2315514|text|与上面一样，您正在尝试将click事件添加到一个尚不存在的dom元素中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2315515|$.live是一个不错的选择，但不幸的是，在大型应用程序中维护起来很痛苦，而且速度相当慢。|2315516|您可以将事件绑定包装在超时中，这会将事件绑定推到队列的末尾-这意味着事件绑定将在您将新元素推送到dom之后执行。如下所示：|2315517|var+html+=+'<div><a+href="#"+id="test">Btn</a></div>';
setTimeout(function(){$("#test").click(function(){
++console.log("clicked");
});},0);
//later
$(htmlNode).html(html);|code-block|syntax|javascript|2315518|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Like above you are trying to add a click event to  a dom element that doesn't yet exist.</p>

<p>$.live is an ok option but unfortunately a pain to maintain in large applications and is rather slow.</p>

<p>You can wrap the event binding in a timeout which pushes the event binding to the end of the queue - which means the event biding will execute AFTER you push your new elements to the dom. Like this:</p>

<pre><code>var html = '&lt;div&gt;&lt;a href="#" id="test"&gt;Btn&lt;/a&gt;&lt;/div&gt;';
setTimeout(function(){$("#test").click(function(){
  console.log("clicked");
});},0);
//later
$(htmlNode).html(html);
</code></pre>


<pre><code>var html = '&lt;div&gt;&lt;a href="#" id="test"&gt;Btn&lt;/a&gt;&lt;/div&gt;';
$(html).find("#test").click(function(){
  console.log("clicked");
});
//later
$(htmlNode).html(html);
</code></pre>

<p>Why don't I receive the "clicked" log?</p>


jquery click without being attached to the DOM

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

var html = '<div><a href="#" id="test">Btn</a></div>';$(html).find("#test").click(function(){  console.log("clicked");});//later$(htmlNode).html(html);为什么我没有收到“...

问不附加到DOM的jquery单击
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不附加到DOM的jquery单击EN