CODEWITHSUNDEEP
jquery
this
this

Reputation: 1426

Unable to edit dynamically added element with jquery

I'm not clear on how one should edit the text / value / innerHTML properties of elements that were added to the DOM using jQuery. I understand that one would use the on() function to set up event handling for an element that was added to DOM after the page load but I'm not able to find something equivalent for modifying the properties.

Here's the fragment of the initial HTML document:

<body><div id="divBody></div></body>

In a separate .js file:

$(document).ready(function () {
  $("#divBody").append("<button id=\"openClose-Button\">Open</button>");
  $("#divBody").on("click", "#openClose-Button", openHandler );
}

Once this is set up, everything works and the openHandler get fired as expected, except that the openHandler is supposed to also change the text of the button and switch out the handler:

var openHandler = function openIt() {
  $("#openClose-Button").off("click");
  $("#divBody").on("click", "#openClose-Button", closeHandler);
  $("#openClose-Button").html = "Close";
};

Neither the on() nor html works even though the event is correctly fired. I tried both selecting via #divBody as I did for the initial setup and also via #openClose-Button.

Upvotes: 0

Views: 268

Answers (1)

user796443
user796443

Reputation:

Try $(document).on("click", "#openClose-Button", openHandler );

This is the correct way of using html(). or text().

$("#openClose-Button").html("Close");

If this closeHandler is a function that it should be used as:

closeHandler();

Upvotes: 2

Related Questions