Fire ajax call on onclick and div

Question

I am attempting to fire off an AJAX call based on the onclick event for a google map integration. The info_window_content function seen here: http://jsfiddle.net/6xw2y/ is the call to create the divs that reside within the map itself.

The "v" variable does in fact contain a store_id. So in the opening line of that function, it has the following:

var info_window_string = "<div class='maps_popup' id="+v.id+">";

Now I have an onclick event that I have duplicated and modified. The first onclick event works just fine and refreshes the panel as it should. The second onclick event doesn't work and the code for that is below:

 $("#div").click(function(){
   var store_id = $(this).find("div").attr("id");

    var pathname =  "ajax=1&store_id="+store_id+"&action=get_nearby_stores&distance="+distance+"&lat="+lat+"&lng="+lng+"&products="+$('#edit-products').val();

    $("#pocp_content").load("file1.php?" + pathname);

 });    

That doesn't seem to work. I've also tried changing the div tag to be like this:

$("div").click(function(){

Which still doesn't work. As an added side hint. At one point I was able to get it to refresh but it was passing map-container as the store_id, instead of the id itself.

What am I missing here?

Answer 1

I agree with Joke_Sense10, but I think you're probably not binding the event to the right DOM element.

Try to open up the developer console in your browser (while being on the side you develop this code for), and enter $("#div") to see if the element it returns is the one you expect. You can also use console.log($("#div")) in the code for that.

answer in comments

Answer 2

对于大量元素，请始终使用.on（）方法，因为后者将在DOM树的最高节点之一上绑定单个事件侦听器。

$(document).on("click","#"+v.id, function(){