jQuery interact with appended data

append jquery
jquery each
jquery prepend
jquery append after
jquery create element
jquery append before
jquery innerhtml
list in jquery

Can anyone point out what I'm doing wrong here? I'm trying to interact with data (appended using ajax)

The alerts fire if the element is already in DOM, but not when It's appended.

Am I using the ".on" wrong?

$(function() {

  $('.card').on('click','.add-exercise', function() {
    alert('clicked');
  });

  // Detect 'enter' key up
  $('#search').on('keyup', function(e){
    if(e.keyCode == 13)
    {
      console.log('hit enter key');
      $(this).trigger("enterKey");
    }
  });

  $('#search').on("enterKey",function(e){

    $.ajax({
      url: '{{ url("exercises/load") }}',
      method: "POST",
      data: {
        _token: "{{csrf_token()}}",
        search: $('#search').val(),
      },
      dataType: "text",
      success: function(data) {
        console.log(data);
        $('.exercise-result').remove();
        $('.card-deck').append(data);
      }
    });

  });

});

I think the .card element is also loading dynamically, in order to make event delegation works properly you need to bind it to an element which is present at the time of page load.

So either you can attach it to the document object.

$(document).on('click','.card .add-exercise', function(){ 
   // rest of your code
});

or better approach would be, attach to an element which is present at the time of page load(I guess .card-deck is present at the time of page load since you are appending data to that or attach to body tag).

$('.card-deck').on('click','.card .add-exercise', function(){ 
   // rest of your code
});

Jquery click event not working after append method, the html DOM dynamically using ajax in interactive web applications. which we append the elements dynamically and pass jquery selector  append() - Create content with HTML, jQuery and DOM Insert content with the append() method. Append content using a function Using a function to insert content at the end of the selected elements.

I guess you have other .card elements in data.

You have to assign the event click again for them. The event is currently only assigned to your first .card elements. This is why it doesn't fire on your new .card elements.

JQuery event binding on dynamically created content, appendTo() and .append() , and .prependTo() If you need to copy related data and events, be sure to pass true as an argument to .clone() . JQuery append method used to insert content to the end of each element inside matching of HTML elements. It inserts specified content as the last child of each element in the jQuery collection. With append() method, the selector expression preceding the method is the container into which the content is inserted. JQuery Append() Syntax $(selector).append(content);

I believe you need to add the event again each time the append is done. Try this and let me know if it works:

function addEvent() {
  $('.card').on('click','.add-exercise', function() {
    alert('clicked');
  });
}

$(function() {
  addEvent();

  // Detect 'enter' key up
  $('#search').on('keyup', function(e){
    if(e.keyCode == 13)
    {
      console.log('hit enter key');
      $(this).trigger("enterKey");
    }
  });

  $('#search').on("enterKey",function(e){

    $.ajax({
      url: '{{ url("exercises/load") }}',
      method: "POST",
      data: {
        _token: "{{csrf_token()}}",
        search: $('#search').val(),
      },
      dataType: "text",
      success: function(data) {
        console.log(data);
        $('.exercise-result').remove();
        $('.card-deck').append(data);
        addEvent();
      }
    });

  });

});

Manipulating Elements, DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements. In this blog, we will learn how to insert and retrieve data using jQuery Ajax in asp.net. We will create a web service and consume that web service in our project with the help of jQuery Ajax. Step 1. Create a database in the SQL server of your choice. CREATE TABLE [dbo].[tblEmployees](.

.append(), To bind the click event to all existing and future elements, use the jQuery on() method. Let's take a look $("ol").append("<li>list item <a href='javascript:void(0​);'  .append( content [, content ] )Returns: jQuery. Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements. DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.

How to Bind Click Event to Dynamically Created Elements in jQuery, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved  Prior to jQuery 1.4.3, .data( obj ) completely replaced all data. Since jQuery 1.4.3, data is instead extended by shallow merge. Since jQuery 1.4.3, data is instead extended by shallow merge. Since jQuery 3 , every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the HTML dataset API .

jQuery append() Method, having trouble selecting dynamically created elements with jquery The code works in that it prints everything correctly but I can't interact with the appended The selector still fires first as the appending is pulling data from a  In this tutorial, learn jquery ajax form submits with the form data step by step. A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax(). If you will be using jQuery’s Ajax Form Submit, you can send the form data to the server without reloading the entire page.

Comments
  • share the data that you are appending
  • try $(document).on('click','.card .add-exercise', or $('.card-deck').on('click','.card .add-exercise',
  • thanks @PranavCBalan $(document) worked great!
  • glad to help ! :)
  • No need to keep attaching the search event
  • True, adjusted.