Question

In the HTML, I have a button defined like this:

<button type="button" onclick="toggleEdit();">Edit</button>

At the end of the page, I have this script I am working on:

<script language="JavaScript">
  <!--
  function toggleEdit() {
    var btn = $(this);
    var li = btn.parent();
    var textArea = li.children('.readOnly');
    ...
  }
  //-->
</script>

I cannot reference the button I have clicked in the script. The btn variable is an object, but I don’t know anything else than that.

I found many examples on the internet that are using this approach:

$(document).ready(function () {
   $('#buttonID').click(function () {
   ...

but I cannot reference the button via ID because it is added dynamically. So, how do I reference it? Thanks.

Answer 1

Just to keep it your way, you have to tell the code that this will refer to the button instead of the actual function.

To do this you can just add an extra argument to the toggleEdit function.

The new HTML would look like this (no apply or call function needed):

<button type="button" onclick="toggleEdit(this);">Edit</button>

Then your new JavaScript would look like this:

<script language="JavaScript">
  <!--
  function toggleEdit(t) {
    var btn = $(t);
    var li = btn.parent();
    var textArea = li.children('.readOnly');
    ...
  }
  //-->
</script>