Как получить текст элемента с помощью jQuery?

Question

Я хочу получить текст щелкающего элемента в предупреждении jQuery.См. Пример ниже 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());
    });
});

Но когда я нажимаю первый раз, отображается пустое предупреждение, а когда я нажимаю 2-е, отображается значение, но дважды оповещение.и держать оповещения о приращениях.

Буду признателен за любую помощь.

Заранее спасибо

Answer 1

Не используйте так много событий кликов, просто проще: jQuery(".asp_res_url").click(function() {});

Это работает:

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>

Answer 2

Поскольку все ваши ссылки встроены в элементы h3, вы можете быть более точным в своем jQuery для получения всех элементов h3, которые находятся внутри другого элемента с именем класса .results, например:

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

Во-вторых, в вашем коде вы используете две функции щелчка ... что не обязательно.С помощью приведенной выше строки кода ... как только вы щелкнете по элементу h3 внутри элемента с именем класса .results, вы можете легко получить текст этого элемента h3, например, так:

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());
});

Здесь работает JSFiddle .