blocks|key|235623|text|这就是你要做的吗？请注意，我将$.on()放在父对象上，但为操作选择了.button。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|235624|事件.on(事件，选择器，数据，处理程序(EventObject))|BOLD|235625|选择器用于筛选触发事件的选定元素的后代的选择器字符串。如果选择器为空或被省略，则事件始终在到达选定元素时触发。|235626|235627|http://api.jquery.com/on/|235628|<div+id="stuff">
++++<button+class="button">Click+me!</button>
++++Stuff
</div>

var+$stuff+=+$('#stuff'),
++++ajaxContent+=+$stuff.html();

$stuff.on('click',+'.button',+function(){
++++$.get('/echo/html/',+function(){
++++++++$stuff.empty();
++++++++console.log($stuff.html());
++++++++alert($stuff.html());+//+Look+behind,+#stuff+is+empty.
++++++++$stuff.html(ajaxContent);
++++++++console.log($stuff.html());
++++});
});|code-block|syntax|javascript|235629|http://jsfiddle.net/62uSU/1|235630|另一个演示：|235631|var+$stuff+=+$('#stuff'),
++++ajaxContent+=+$stuff.html(),
++++$ajaxContent,
++++colors+=+['blue','green','red'],
++++color+=+0;

$stuff.on('click',+'.button',+function(){
++++$.get('/echo/html/',+function(){
++++++++color%2B%2B;
++++++++if+(color+==+colors.length)+color+=+0;
++++++++console.log($stuff.html());
++++++++alert($stuff.html());
++++++++$ajaxContent+=+$(ajaxContent);
++++++++$stuff.append($ajaxContent).css('color',+colors[color]);
++++++++console.log($stuff.html());
++++});
});|235632|http://jsfiddle.net/62uSU/2/|235633|entityMap|0|LINK|mutability|MUTABLE|url|1|2^0|F|6|Z|7|0|8|4|0|0|3|0|0|0|P|0|0|0|0|R|1|0|0|0|0|S|2|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@$9|1F|A|1G|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1H|8|@$9|1I|A|1J|B|H]]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|N|3|O|5|P|7|1P|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|U|3|V|5|6|7|1U|8|@]|D|@]|E|$]]|$1|W|3|X|5|P|7|1V|8|@]|D|@]|E|$Q|R]]|$1|Y|3|Z|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|10|3|-4|5|6|7|20|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|M]]|17|$5|13|14|15|E|$16|T]]|18|$5|13|14|15|E|$16|Z]]]]

Is this what you're trying to do? Note, I'm putting the <code>$.on()</code> on the parent, but selecting the <code>.button</code> for the action.

<blockquote>
 .on( events [, selector] [, data], handler(eventObject) )
 
 selector A selector string to filter the descendants of the selected
 elements that trigger the event. If the selector is null or omitted,
 the event is always triggered when it reaches the selected element.
</blockquote>

<a href="http://api.jquery.com/on/" rel="nofollow">http://api.jquery.com/on/</a>

<pre><code>&lt;div id="stuff"&gt;
 &lt;button class="button"&gt;Click me!&lt;/button&gt;
 &lt;p&gt;Stuff&lt;/p&gt;
&lt;/div&gt;

var $stuff = $('#stuff'),
 ajaxContent = $stuff.html();

$stuff.on('click', '.button', function(){
 $.get('/echo/html/', function(){
 $stuff.empty();
 console.log($stuff.html());
 alert($stuff.html()); // Look behind, #stuff is empty.
 $stuff.html(ajaxContent);
 console.log($stuff.html());
 });
});
</code></pre>

<a href="http://jsfiddle.net/62uSU/1" rel="nofollow">http://jsfiddle.net/62uSU/1</a>

Another demonstration:

<pre><code>var $stuff = $('#stuff'),
 ajaxContent = $stuff.html(),
 $ajaxContent,
 colors = ['blue','green','red'],
 color = 0;

$stuff.on('click', '.button', function(){
 $.get('/echo/html/', function(){
 color++;
 if (color == colors.length) color = 0;
 console.log($stuff.html());
 alert($stuff.html());
 $ajaxContent = $(ajaxContent);
 $stuff.append($ajaxContent).css('color', colors[color]);
 console.log($stuff.html());
 });
});
</code></pre>

<a href="http://jsfiddle.net/62uSU/2/" rel="nofollow">http://jsfiddle.net/62uSU/2/</a>

blocks|key|2905223|text|好吧，我通过正确使用.on()函数解决了我的问题，因为我缺少一个参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2905224|而不是|2905225|$(".button").on("click",+function()+{+}+);|code-block|syntax|javascript|2905226|我用过|2905227|$(".container").on("click",+".button",+function()+{+}+);|2905228|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Ok i solved my problem by using the .on() function correctly since i was missing one parameter.

instead of

<pre><code>$(".button").on("click", function() { } );
</code></pre>

i used

<pre><code>$(".container").on("click", ".button", function() { } );
</code></pre>

blocks|key|235650|text|应该这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|235651|$('body').on('click',+'.button',+function+(){
++++++++alert('click!');
++++});|code-block|syntax|javascript|235652|如果您有一个在ajax请求期间不会更改的容器，则性能会更高：|235653|$('.container').on('click',+'.button',+function+(){
++++++++alert('click!');
++++});|235654|始终将委托事件绑定到将包含动态元素的最接近的静态元素。|235655|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|$]]

Should be done this way.

<pre><code>$('body').on('click', '.button', function (){
 alert('click!');
 });
</code></pre>

If you have a container that doesn't change during the ajax request, this is more performant:

<pre><code>$('.container').on('click', '.button', function (){
 alert('click!');
 });
</code></pre>

Always bind the delegate event to the closest static element that will contain the dynamic elements.

blocks|key|2905293|text|而不是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2905294|$(".button").on("click",+function()+{+}+);|code-block|syntax|javascript|2905295|我使用：|2905296|$(".container").on("click",+".button",+function()+{+}+);|2905297|我用过这个，它起作用了。|2905298|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|$]]

Instead of:

<pre><code>$(".button").on("click", function() { } );
</code></pre>

I used:

<pre><code>$(".container").on("click", ".button", function() { } );
</code></pre>

I have used this and it worked.

I am using <code>$(".button").on("click", function(){ });</code>

to click to a button which is on a container but then an ajax call is done and the content 
gets updated with new stuff and then when i try to click <code>.button</code> it wont work... nothing will get returned when i click the button.

I even tried

<pre><code>$(".button").live("click", function(){ });
</code></pre>

or 

<pre><code>$(".button").click(function(){ });
</code></pre>

How can I make it work?

EDIT :
my html:

<pre><code>&lt;div class="container"&gt;
 &lt;ul&gt;
 &lt;li&gt;item1&lt;/li&gt;
 &lt;li&gt;item2&lt;/li&gt;
 &lt;li&gt;item3&lt;/li&gt;
 &lt;/ul&gt;
 &lt;input type="button" value="reload" class="button" /&gt;
&lt;/div&gt;
</code></pre>

jquery click doesn't work on ajax generated content

容器

我正在使用$(".button").on("click", function(){ });点击一个在容器上的按钮，然后ajax调用完成，内容用新的东西更新，然后当我尝试点击.button时，它不起作用……当我单击该按钮时，不会返回任何内容。我甚至试过$(".button").live("click", function...

问jquery click不适用于ajax生成的内容
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery click不适用于ajax生成的内容EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery click不适用于ajax生成的内容
EN