Question

My Javascript something like this

$('button').click(function(){
  //load the data and place inside to #content
});

$('#id-from-data-that-load').click(function(){
  //Do some action
});

So this is html tag

<button>Load</button>
<div id="content">
  //Empty Data
</div>

when button LOAD clicked html will be like this

<button>Load</button>
<div id="content">
  <div id="id-from-data-that-load">
    content that load
  </div>
</div>

BUT, when i clicked div id-from-data-load the function won’t run.

How to solve it?

Answer 1

You need to use live for the div event instead. Here’s what it should be:

$('#id-from-data-that-load').live("click", function(){
  //Do some action
});

Or alternatively you could also do this:

var submitted = false;

$('button').click(function(){
  // If the button was clicked before, we don't submit again.
  if (submitted == true) { return false; }

  // Set submitted to true, so when user clicks the button again,
  // this operation will not be processed one more time.
  submitted = true;

  //load the data and place inside to #content
  $.post("/getdata", {}, function(response) {
      //after the load happened we will insert the data into the div.
      $("#content").html(response);

      // Do the bindings here.
      $('#id-from-data-that-load').click(function(){
        //Do some action
      });
  });

  return false;
});