blocks|key|244311|text|由于您是通过ajax加载跨度的，因此您必须将委托处理程序附加到事件，以便在事件冒泡时捕获它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|244312|$(document).on('click','span',function(e){
++++console.log(e.target.id)
})|code-block|syntax|javascript|244313|您可能希望将事件附加到最接近的静态成员，以提高效率。|244314|$('#main_div').on('click','span',function(e){
++++console.log(e.target.id)
})|244315|例如，比绑定到文档要好。|244316|这个问题可能会帮助你理解|244317|Direct+vs.+Delegated+-+jQuery+.on()|offset|length|244318|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on^0|0|0|0|0|0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Since you are loading in the spans via ajax you will have to attach delegate handlers to the events to catch them as they bubble up.

<pre><code>$(document).on('click','span',function(e){
 console.log(e.target.id)
})
</code></pre>

you will want to attach the event to the closest static member you can to increase efficiency.

<pre><code>$('#main_div').on('click','span',function(e){
 console.log(e.target.id)
})
</code></pre>

is better than binding to the document for instance.

This question may help you understand

<a href="https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on">Direct vs. Delegated - jQuery .on()</a>

blocks|key|244377|text|动态加载内容时更新，以便使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|244378|$(document).on('click',+'span',+function+()+{
++++alert(this.id);
});|code-block|syntax|javascript|244379|旧代码|244380|$('span').click(function(){
++++alert(this.id);
});|244381|或者，您可以使用.on|offset|length|244382|$('span').on('click',+function+()+{
++++alert(this.id);
});|244383|this是指单击的当前span元素|style|CODE|244384|this.id将给出点击的当前跨度的id|244385|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/^0|0|0|0|0|8|3|0|0|0|0|4|0|0|7|I|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]]|A|$]]|$1|O|3|P|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1D|8|@$M|1E|N|1F|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1G|8|@$M|1H|N|1I|S|T]|$M|1J|N|1K|S|T]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

update as you loading contents dynamically so you use.

<pre><code>$(document).on('click', 'span', function () {
 alert(this.id);
});
</code></pre>

old code

<pre><code>$('span').click(function(){
 alert(this.id);
});
</code></pre>

or you can use <a href="http://api.jquery.com/on/">.on</a>

<pre><code>$('span').on('click', function () {
 alert(this.id);
});
</code></pre>

<code>this</code> refers to current span element clicked

<code>this.id</code> will give the <code>id</code> of the current span clicked

blocks|key|28138|text|你可以通过下面的代码获得被点击的id|type|unstyled|depth|inlineStyleRanges|entityRanges|data|28139|$("span").on("click",function(e){
++++console.log(e.target.Id);
});|code-block|syntax|javascript|28140|使用.on()事件以实现将来的兼容性|offset|length|style|CODE|28141|entityMap^0|0|0|2|5|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|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You can get the id of clicked one by this code

<pre><code>$("span").on("click",function(e){
 console.log(e.target.Id);
});
</code></pre>

Use <code>.on()</code> event for future compatibility

blocks|key|244481|text|我想分享一下如何使用它来更改按钮的属性，因为我花了一些时间才弄清楚……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|244482|例如，为了将其背景更改为黄色：|244483|$("#"%2BString(this.id)).css("background-color","yellow");|code-block|syntax|javascript|244484|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I wanted to share how you can use this to change a attribute of the button, because it took me some time to figure it out...

For example in order to change it's background to yellow:

<pre><code>$("#"+String(this.id)).css("background-color","yellow");
</code></pre>

<pre><code>&lt;div class="main_div"&gt;
 &lt;div id="inner_div"&gt; 
 &lt;span id="d1" class="get_clicked"&gt;click to get id&lt;/span&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

How to get the id of the clicked element? The span which is present inside the inner_div will be having different ids because I will be loading the span from the model(MVC) using jquery ajax. So there will be 'n' number of span. All the span will have unique id. I want to get the id of the span which I click. 

How the get the id of the span when clicked? How to do this using jQuery?

How to get the id of the element clicked using jQuery

jQuery

<div class="main_div"> <div id="inner_div"> click to get id </div></div>如何获取被点击元素的id？存在于inner_div中的跨度将...

问如何使用jQuery获取被单击元素的id
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery获取被单击元素的idEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery获取被单击元素的id
EN