Jquery - Ajax click on a href trigger

Question

I have a small question. I have an input field where somebody can search a specific value. Here is the following code

$('#usersearch').keyup(function () { 
    var inputvalue = $('#usersearch').val();
    $('#usersearch').val(inputvalue);
    document.getElementById("popupwithuserssearch").style.display = "block"; 
    $.ajax({
        type: "GET",
        url: "usersearch.php",
        data: {
            input: inputvalue
        },
        success: function(msg) {
            $('#popupwithuserssearch').html(msg); 
        }
    });
})

After i run my query in usersearch.php I echo the html to generate a table :

$cell='1';
while (!$rs->EOF){
    echo '<tr>';
    echo '<td align="left" class="cell-'.$cell.'" bgcolor="#F0F0F0"><a href="#" style="color:black;" id="clicked">'.$rs->fields('name').'</a></td><br>';
    $cell = $cell+1;
    $rs->movenext();
    echo ' </tr>';
} ';

now i'm trying to get the value if the a href is clicked i tried this already:

$("#clicked").click(function () {
    var value = $(".testClick").attr("href");
    alert(value );
});

I'm probably looking over it can somebody help me out

Thanks!

Firstly, you shouldn't have multiple elements with the same ID and judging by your `while` loop I'm guessing you will. An ID should be unique. Secondly your issue is because you're loading content via ajax so you need to bind the click handler to a static parent element as explained here https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — TommyBs, Oct 09 '18 at 09:23
@TommyBs i had the id's as an test thanks for still letting me know. i figured it out thanks alot!. — Kevin, Oct 09 '18 at 09:32

qqmydarling · Answer 1 · 2018-10-09T09:37:08.167

0

Well, remove your ID cause it must be a unique, and assign a class instead.
Try this code

$(".clicked").click(function () {
   var value = $(this).attr("href");
   alert(value);
});

To prevent a redirect by clicking on your A tag add following line event.preventDefault(); to your click function.

edited Oct 09 '18 at 09:37

answered Oct 09 '18 at 09:33

qqmydarling

137
1
6
16

This won't work for dynamically generated elements. You have to delegate the event. – Jai Oct 09 '18 at 09:36

score 0 · Answer 2 · answered Oct 09 '18 at 09:36

Since no value to href at the moment I'm displaying the ID

// Add content dynamically
$(document).ready(function(){
var content = '<table>';
for(var i = 0 ; i < 10 ; i++){
  content += '<tr><td align="left" class="cell-'+i+'" bgcolor="#F0F0F0"><a href="#"   style="color:black;" class="clicked" id="clicked_'+i+'">'+i+'</a></td></tr>' 

}
  content += '</table>';
  $('#add-dynamic-content').append(content)
});



// Click event
$(document).on('click','.clicked', function(){
    alert($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='add-dynamic-content'></div>

score -1 · Answer 3 · answered Oct 09 '18 at 09:26

-1

$(document).on('click', '#clicked', function () {
    var value = $(".testClick").attr("href");
    alert(value );
});

answered Oct 09 '18 at 09:26

Anil Gupta

237
1
7

Jquery - Ajax click on a href trigger

3 Answers3