how to get clicked element text using jQuery?

问题

I want to get the text of clicked element in an alert of jQuery. See example below https://jsfiddle.net/pymd4n04/2/

jQuery(".results").click(function() {
event.preventDefault();
    jQuery(this).find('h3').click(function() {
      var text = jQuery(this).text();
console.log(text.trim());
alert(text.trim());
    });
});

But when I click first time, empty alert is shown and when I click 2nd the value is shown but twice alert. and keep increment alerts.

Any help would be appreciated.

Thanks in advance

回答1:

Since all of your links are embedded inside h3 elements you can be more specific in your jQuery to retrieve all h3 elements that are inside another element with the class name .results like so:

jQuery(".results h3").click(function() {

Secondly, in your code you're using two click functions... which is not necessary. With the line of code above.. once you click on an h3 element inside an element with the class name .results then you can easily grab the text of that h3 element like so:

jQuery(".results h3").click(function(event) {
    event.preventDefault();
    var text = jQuery(this).text(); // 'this' refers to the h3 element that you clicked.. not the div with the class .results
    alert(text.trim());
});

Here is working JSFiddle.

回答2:

Don't use so many click events, just easier : jQuery(".asp_res_url").click(function() {});

This works:

jQuery(".asp_res_url").click(function() {
event.preventDefault();
alert( jQuery(this).text().trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results" style="height: 460px; overflow-y: auto;">

        
        <div class="resdrg"><div class="item asp_result_pagepost asp_an_fadeIn">
    <div class="asp_content">
            <a class="asp_res_image_url" href="https://einsteam.com/contact/">
                <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);">
                    <div class="void"></div>
                </div>
            </a>
        <h3><a class="asp_res_url" href="https://einsteam.com/contact/">
                Real Estate                                <span class="overlap"></span>
                        </a></h3>
        <div class="etc">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn">
    <div class="asp_content">
            <a class="asp_res_image_url" href="https://einsteam.com/contact/">
                <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);">
                    <div class="void"></div>
                </div>
            </a>
        <h3><a class="asp_res_url" href="https://einsteam.com/contact/">
                E-Commerce                                <span class="overlap"></span>
                        </a></h3>
        <div class="etc">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn">
    <div class="asp_content">
            <a class="asp_res_image_url" href="https://einsteam.com/contact/">
                <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);">
                    <div class="void"></div>
                </div>
            </a>
        <h3><a class="asp_res_url" href="https://einsteam.com/contact/">
                Retail                                <span class="overlap"></span>
                        </a></h3>
        <div class="etc">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn">
    <div class="asp_content">
            <a class="asp_res_image_url" href="https://einsteam.com/contact/">
                <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);">
                    <div class="void"></div>
                </div>
            </a>
        <h3><a class="asp_res_url" href="https://einsteam.com/contact/">
                Payment Industry                                <span class="overlap"></span>
                        </a></h3>
        <div class="etc">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn">
    <div class="asp_content">
            <a class="asp_res_image_url" href="https://einsteam.com/contact/">
                <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);">
                    <div class="void"></div>
                </div>
            </a>
        <h3><a class="asp_res_url" href="https://einsteam.com/contact/">
                Field Service                                <span class="overlap"></span>
                        </a></h3>
        <div class="etc">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="asp_spacer"></div><div class="item asp_result_pagepost asp_an_fadeIn">
    <div class="asp_content">
            <a class="asp_res_image_url" href="https://einsteam.com/contact/">
                <div class="asp_image" style="background-image: url(&quot;http://einsteam.com/#contactus&quot;);">
                    <div class="void"></div>
                </div>
            </a>
        <h3><a class="asp_res_url" href="https://einsteam.com/contact/">
                SAS                                <span class="overlap"></span>
                        </a></h3>
        <div class="etc">
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="asp_spacer"></div></div>

        
    </div>

来源：https://stackoverflow.com/questions/50467307/how-to-get-clicked-element-text-using-jquery

标签

javascript

jquery

jquery-ui