CODEWITHSUNDEEP
javascriptjquery
송준석
송준석

Reputation: 1031

how can i target span's string in click function?

I'm try to catch 'banner name' in under code. 

<div class = 'pdf-area'>
    <ul class = 'pdf list'>
        <li>
            <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"></span> 'banner name'</a>

        </li>
   </ul>
</div>

and here is my try.

$("div.pdf-area ul a").click(function(i) {
    var txt = $(i.target).text();
    console.log(txt);
});

When I run this code, I don't get the value I want.

How can I extract 'baaner name'?

(href= # -> it's not my code and don't have any autohrity that can modify this code . I only can extract value in this condition.)

Upvotes: 0

Views: 93

Answers (4)

Mamun
Mamun

Reputation: 68933

You do not need to add the click event by using the selector. Simply pass this as the first parameter. Then inside the function use find() on that object to target the span.

Try the following:

function pdfDownload(el, link){
  var name = $(el).find('span.icon-left').text();
  console.log(name);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdf area'>
  <ul class = 'pdf list'>
    <li>
      <a href="#" onclick="javascript:pdfDownload(this, '/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"> 'banner name'</span></a>
    </li>
 </ul>
</div>

OR: If you do not want to change the HTML

$(".pdfarea > ul a > span").click(function() {
    var txt = $(this).text();
    console.log(txt);
});
function pdfDownload(){}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdfarea'>
  <ul class = 'pdflist'>
    <li>
      <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"> 'banner name'</span></a>
    </li>
 </ul>
</div>

If the banner name outside the span try the following:

$("div.pdf-area ul a").click(function() {
    var txt = $(this).text();
    console.log(txt);
});

function pdfDownload(){}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdf-area'>
  <ul class = 'pdf list'>
    <li>
      <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"></span> 'banner name'</a>

    </li>
 </ul>
</div>

Upvotes: 2

M3ghana
M3ghana

Reputation: 1271

Hi Try this -

 $("div.pdf-area ul a").click(function(i) {
            var txt = $("div.pdf-area > ul.list > li a span.icon-left").text();
            console.log(txt);
        });

Upvotes: 0

brk
brk

Reputation: 50291

You can remove the $("div.pdf-area ul a").click(function(i).. and create pdfDownload function which will handle both

function pdfDownload(e, path) {
  console.log(path)
  e.preventDefault();
  var txt = $(e.target).text();
  console.log(txt);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pdf-area'>
  <ul class='pdf list'>
    <li>
      <a href="#" onclick="pdfDownload(event ,'/pdf_name/spec_name.pdf')"><span class="icon-left"> 'banner name'</span></a>

    </li>
  </ul>
</div>

Upvotes: 0

Gokul Maha
Gokul Maha

Reputation: 298

<div class = 'pdf-area'>
    <ul class = 'pdflist'>
        <li>
            <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"> 'banner name'</span></a>

        </li>
   </ul>
</div>

$(document).on('click','.pdflist a',function(){
      alert($(this).text());
})

Above click event will give the text on the current element

Fiddle : https://jsfiddle.net/gokulmaha/vt3b0keu/2/

Upvotes: 0

Related Questions