JavaScript click not working with InnerHtml

Question

When user click on tag with class ".btn" it should console.log(1), if user click on "Next" button - .buttons>button should replace with given values in array tasks. It works well with replacement, but after replacement click ".btn" doen't work anymore.

What issue?

<div class="buttons">
    <button class="btn">
        <span class="text1">var 1</span>
    </button>
    <button class="btn">
        <span class="text2">var 2</span>
    </button>
</div>

<button class="right">
    <span class="text">Next</span>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $(".btn").on('click', function() {
        console.log(1)
    })
</script>


<script>
    var tasks = [
        ["task1", "task_addition1", "1", "var1", "img1.url", "var1", "img1.url"],
        ["task2", "task_addition2", "2", "var2", "img1.url", "var2", "img2.url"],
        ["task3", "task_addition3", "1", "var3", "img1.url", "var3", "img3.url"],
    ];
    var task_number = 0;

    $(".right").on('click', function() {

        let buttons = ""
        for (var i = 3; i < tasks[task_number].length;) {
            buttons += '<button class="btn btn-light"><span class="text1">{}</span></button>'.replace("{}", tasks[task_number][i])
            i += 2;
        };
        $(".buttons").html(buttons);

        task_number += 1
    })
</script>

score 3 · Accepted Answer · answered Jul 16 '20 at 06:13

Your binded event will be removed when you replace buttons. In this case, you should bind an event to parent(I usually use body selector) and provide selector to find it's children.

var tasks = [
        ["task1", "task_addition1", "1", "var1", "img1.url", "var1", "img1.url"],
        ["task2", "task_addition2", "2", "var2", "img1.url", "var2", "img2.url"],
        ["task3", "task_addition3", "1", "var3", "img1.url", "var3", "img3.url"],
    ];
var task_number = 0;

$(".right").on('click', function() {
  let buttons = ""
  for (var i = 3; i < tasks[task_number].length;) {
    buttons += '<button class="btn btn-light"><span class="text1">{}</span></button>'.replace("{}", tasks[task_number][i])
    i += 2;
  };
  $(".buttons").html(buttons);

  task_number += 1
})
    
$("body").on("click", ".btn", function() {
  console.log(1)
});

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <div class="buttons">
        <button class="btn">
            <span class="text1">var 1</span>
        </button>
        <button class="btn">
            <span class="text2">var 2</span>
        </button>
    </div>

    <button class="right">
        <span class="text">Next</span>
    </button>
  </body>
</html>

JavaScript click not working with InnerHtml

1 Answers1