CODEWITHSUNDEEP
javascriptjquery
rjm_wd
rjm_wd

Reputation: 25

How to check what text inside Span without ID and Class

I have this code from that generated by a plugin, i want to capture the click event and determine what particular link was click.

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
<div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
    <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
</div>

I was able to capture the click event using this code below, and my problem now is to check what is the Text inside Span of the Anchor tag that was clicked so i can execute a code based on what link was click. 

    document.addEventListener('click', function(e) {
    var tre = e.target.closest('a').href || '';
    console.log('Clicked');
    }, false);

Upvotes: 0

Views: 324

Answers (5)

Sinto
Sinto

Reputation: 3997

You can do that easily check class on the a tag by using hasClass() like:

$(this).hasClass('DTTT_button_new')

Below is the demo to get text from clicked element & its href:

$('body').on('click', '.dt-buttons a', function(e) {
  e.preventDefault();
  console.log($(this).text(), $(this).prop('href'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
  <div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="https://add_new_entry"><span>New entry</span></a>
    <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="https://edit_link"><span>Edit</span></a>
  </div>

Upvotes: 0

amba patel
amba patel

Reputation: 424

In jQuery/javascript you can get this by onClick event:

 $(document).on('click', '.dt-button', function (e) {
     // you can perform click event on DTTT_button class 
        // get text of clicked element
        var clicked_href_val = $(this).text();
        console.log(clicked_href_val); // print value

       //var clicked_href_val = $(this).attr('href');
     // you can get other parameters(like aria-controls, tabindex whatever defined) of clicked element
    });

Hope it helps.

Upvotes: 1

Abdul Rehman Sheikh
Abdul Rehman Sheikh

Reputation: 939

Try this, It will give you exact text for it.

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
        <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
        <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
    </div>
</div>
<script>
    document.addEventListener('click', function (e) {
        var mtar = e.target.closest('span'); 
        var tre = e.target.closest('a').href || '';
        console.log('Clicked Text: ' + mtar.innerHTML);
    }, false);
</script>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

You can send the elements onclick using this keyword.

function a(e)
{
console.log($(e).attr('href'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
<div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#a" onclick="a(this)"><span>New entry</span></a>
    <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#b" onclick="a(this)"><span>Edit</span></a>
</div>

Upvotes: 0

Abdul Rehman Sheikh
Abdul Rehman Sheikh

Reputation: 939

Try this, It should help you.

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
        <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
        <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
    </div>
</div>
<script>
    document.addEventListener('click', function (e) {
        var mtar = e.target.closest('a'); 
        var tre = e.target.closest('a').href || '';
        console.log('Clicked' + mtar.innerHTML);
    }, false);
</script>

Upvotes: 0

Related Questions