Dynamically populated controls do not trigger events - jQuery 3.6.0

user_16124188 0
Viewed 121

I am trying to make a dashboard with a start and stop feature but apparently the dynamically populated controls are not triggering the event. The code for the dynamic controls are

$(document).ready(function () {
  $.ajax({
    url:
      "https://ul2qo9rru1.execute-api.ap-south-1.amazonaws.com/default/getChannelData",
    type: "GET",
    dataType: "json",
    success: function (response) {
      console.log(response);
      var rowHtml = "";
      $.each(response, function (key, value) {
        rowHtml =
          " <div class='col-xl-6 col-lg-12'>" +
          " <div class='card card-chart'>" +
          "<div class='card-header card-header-success'>" +
          "<div >Status : <a>" +
          value.State +
          "</a></div>" +
          "</div>" +
          "<div class='card-body'>" +
          "<h4 class='card-title'>" +
          value.Name +
          "</h4>" +
          "<h4 class='card-title'><a class='channelid'>" +
          value.ChannelId +
          "</a></h4><p class='card-category'><div class='btn-group'><input class='btn mb-2 mb-md-0 btn-quarternary btn-block btn-round' type='button' value='Start' id='start1'><input class='btn mb-2 mb-md-0 btn-quarternary btn-block btn-round' type='button' value='Stop' id='stop1'></input></div></div></div> </div>";
      });
      $(".row").append(rowHtml);
    }
  });
});

The controls are populating ok but the event trigger on it is not working

$(document).ready(function(){
    var channelID = $(".channelid").val();
  $("#start1").click(function () {
    $.ajax({
      url:
        "https://ul2qo9rru1.execute-api.ap-south-1.amazonaws.com/default/channelTest-startstop?state=Start&channelid=2107494",
      type: "POST",
      headers: { "x-api-key": "PUoZWYihWE8DZbC58sng8zOZLQcG93s5mNTedxea" },
      dataType: "json",
      success: function (response) {
        alert(response);
      }
    });
  });
  $("#stop1").click(function () {
    $.ajax({
      url:
        "https://ul2qo9rru1.execute-api.ap-south-1.amazonaws.com/default/channelTest-startstop?state=Stop&channelid=" +
        channelID,
      type: "POST",
      headers: { "x-api-key": "PUoZWYihWE8DZbC58sng8zOZLQcG93s5mNTedxea" },
      dataType: "json",
      success: function (response) {
        alert(response);
      }
    });
  });
});

Any help would be appreciated at this point..

html jquery javascript
1 Answers

Consider the following example.

$(function() {

  function sendStart(event) {
    event.preventDefault();
    $.ajax({
      url: "https://ul2qo9rru1.execute-api.ap-south-1.amazonaws.com/default/channelTest-startstop?state=Start&channelid=" + $(event.target).data("channel-id"),
      type: "POST",
      headers: {
        "x-api-key": "PUoZWYihWE8DZbC58sng8zOZLQcG93s5mNTedxea"
      },
      dataType: "json",
      success: function(response) {
        alert(response);
      }
    });
  }

  function sendStop(event) {
    event.preventDefault();
    $.ajax({
      url: "https://ul2qo9rru1.execute-api.ap-south-1.amazonaws.com/default/channelTest-startstop?state=Stop&channelid=" + $(event.target).data("channel-id"),
      type: "POST",
      headers: {
        "x-api-key": "PUoZWYihWE8DZbC58sng8zOZLQcG93s5mNTedxea"
      },
      dataType: "json",
      success: function(response) {
        alert(response);
      }
    });
  }

  function makeCard(data) {
    var col = $("<div>", {
      class: "col-xl-6 col-lg-12"
    });
    var card = $("<div>", {
      class: "card card-chart"
    }).appendTo(col);
    var head = $("<div>", {
      class: "card-header card-header-success"
    }).appendTo(card);
    $("<div>").html("Status: <a>" + data.Status + "</a>").appendTo(head);
    var body = $("<div>", {
      class: "card-body"
    }).appendTo(card);
    var title = $("<h4>", {
      class: "card-title"
    }).html(data.Name).appendTo(body);
    var titleId = $("<h4>", {
      class: "card-title"
    }).html(data.ChannelId).appendTo(body);
    $("<p>", {
      class: "card-category"
    }).appendTo(body);
    $("<div>", {
      class: "btn-group"
    }).appendTo($("p", body));
    var start = $("<input>", {
      class: "btn mb-2 mb-md-0 btn-quarternary btn-block btn-round",
      type: "button",
      value: "Start",
      "data-channel-id": data.ChannelId,
      id: "start-" + $(".btn-group input[id^='start-']").length + 1
    }).appendTo($("p > div", body));
    var stop = $("<input>", {
      class: "btn mb-2 mb-md-0 btn-quarternary btn-block btn-round",
      type: "button",
      value: "Stop",
      "data-channel-id": data.ChannelId,
      id: "stop-" + $(".btn-group input[id^='stop-']").length + 1
    }).appendTo($("p > div", body));

    start.click(sendStart);
    stop.click(sendStop);

    return col;
  }

  $.ajax({
    url: "https://ul2qo9rru1.execute-api.ap-south-1.amazonaws.com/default/getChannelData",
    type: "GET",
    dataType: "json",
    success: function(response) {
      console.log(response);
      $.each(response, function(key, value) {
        $(".row").append(makeCard(value));
      });
    }
  });
});

Break down all the steps into their own functions to help assigning event callbacks. This will iterate the response, all the rows, and bind the click event callbacks. Passing the Channel ID to the Data attribute to each of the buttons allows you to grab it form the event object.

user_4633190
Related