Using Dynamic Links To Trigger Ajax

I have a couple of links that I want to trigger operations through ajax from, but I dont know how to continue on this matter. I've kind of solved it for static links but my links a

Solution 1:

I would recommend, You to use data-* prefixed custom attributes to store arbitrary information with the element which can be used later.

<aclass='link'href='#'data-key="1">Link 1</a>

Then using your existing click handler, You can use Element.dataset property to access the data. Using jQuery the same result can be achieved using .data('key') method.

$(document).ready(function() {
  //Use common class to bind the event handler
  $(".link").click(function(e) {
    var id = this.dataset.key;
    e.preventDefault();
    $('#result').empty().text('Executing command...'); 
    $('#result').load('ajax.php?op=edit&id='+id, function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load

  }); //end click
}); //end ready()

Solution 2:

1) Add class to each link

2) Take click event for that class

$(".lnk").click(function(e) { // take click event for link
     e.preventDefault();
     var id = $(this).attr("id").match(/\d+/); // get integer value from id so you will get idalert(id)
     $('#result').empty().text('Executing command...'); 
     $('#result').load('ajax.php?op=edit&id='+id, function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load
  }); //end click

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid='result'></div><aid='link1'href='#'class="lnk">Link 1</a><br><aid='link2'href='#'class="lnk">Link 2</a><br><aid='link3'href='#'class="lnk">Link 3</a><br><aid='link4'href='#'class="lnk">Link 4</a><br><aid='link5'href='#'class="lnk">Link 5</a><br><aid='link6'href='#'class="lnk">Link 6</a><br>

Solution 3:

You can map events to dynamically loaded elements with on :

$("#staticParentContainer").on("click", "#dynamicElement", function() {
    // up to you
});

see http://api.jquery.com/on/

Solution 4:

You can use jQuery starts with attribute selector:

$('[id^="link"]')

$('[id^="link"]').click(function(e) {
  e.preventDefault();
  console.clear();  
  console.log('$(this).html():', $(this).html());
  // Your code...
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><divid='result'></div><aid='link1'href='#'>Link 1</a><br><aid='link2'href='#'>Link 2</a><br><aid='link3'href='#'>Link 3</a><br><aid='link4'href='#'>Link 4</a><br><aid='link5'href='#'>Link 5</a><br><aid='link6'href='#'>Link 6</a><br>

Solution 5:

Try this selector;

$('[id^="link"]')

$(document).ready(function() {
  $('[id^="link"]').click(function(e) {
     e.preventDefault();
     $('#result').empty().text('Executing command...'); 
     $('#result').load('ajax.php?op=edit&id=4', function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load
  }); //end click
}); //end ready()

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><divid='result'></div><aid='link1'href='#'>Link 1</a><br><aid='link2'href='#'>Link 2</a><br><aid='link3'href='#'>Link 3</a><br><aid='link4'href='#'>Link 4</a><br><aid='link5'href='#'>Link 5</a><br><aid='link6'href='#'>Link 6</a><br>