0

I am using Google Place Autocomplete

When i search any thing in autocomplete textbox google appends some divs in my html ,

<div class="pac-container" style="position: absolute; z-index: 1000; width: 134px; left: 885px; top: 412px; display: none;">
    <div class="pac-item remove">This is me </div>
  <div class="pac-item"><b>A</b>ustralia</div>
  <div class="pac-item"><b>A</b>bbas Town, Karachi, Sind, Pakistan</div>
  <div class="pac-item"><b>A</b>ustria</div>
  <div class="pac-item"><b>A</b>rgentina</div><div class="pac-item"><b>A</b>rizona</div></div>

now you can notice that first child ion pac-container is not like others , i added that div dynamically for some purpose . Now if i want to bind a event to that div then i doesn't work .

here is what i am doing 

$('.remove').live('click', function () {
   console.log("working");
});

Thanks in advance . Update

I think you guys misunderstand me , if i put my dynamic div into any other place except pac-container , then it works but when i put my div in pac-container then it doesn't work and i tried almost everyone's solution but no one works .
Hope now you guys understand the scenario . Thanks

Update 2

this is the link where i upload my working

Ancient
  • 3,007
  • 14
  • 55
  • 104
  • If you don't show us some more code, how are we to know what is wrong with it ? As all of the answers below prove, the procided code works fine, so the problem lies in some part of code not given in your answer. Idea: Why don't you prepare a **[SSCCE](http://sscce.org/)** for us ? Or a fiddle would help... – gkalpak May 28 '13 at 09:18
  • @ExpertSystem see my Update 2 – Ancient May 28 '13 at 09:53

5 Answers5

1

You don't mention which version of jquery you are using but as of jquery 1.7 live has been deprecated in favour of on, so you can replace your live binding with this one:

 $('.pack-container').on('click', '.remove', function(){
     console.log("working");
  });

If pack-container is also a dynamically created element then you would need to revise the above to be:

 $(document).on('click', '.remove', function(){
     console.log("working");
  });

Official documentation here http://api.jquery.com/on/

connectedsoftware
  • 6,987
  • 3
  • 28
  • 43
0
$(document).on('click', '.remove', function () {
   console.log("working");
});
Niccolò Campolungo
  • 11,824
  • 4
  • 32
  • 39
0
$(document).on('click','.remove', function () {
   //Your code
});

You should delegate the event using .on. By the way .live is outdated. Instead use .on method. The problem is dynamically added elements are not available on the page load to bind events to them. Therefore error occurs. Try binding the event to the patent which is in your case could be another div or document would be fine.

Read more

Direct vs. Delegated - jQuery .on()

Community
  • 1
  • 1
Techie
  • 44,706
  • 42
  • 157
  • 243
0

I have tried your code its working correctly.I think you are doing this click function in dom ready function.If you try click function for dynamic element in dom ready means it wont work..

Check your code in jsfiddle http://jsfiddle.net/mNq5X/

   <div class="pac-container">
   <div class="pac-item remove">This is me </div>
   <div class="pac-item"><b>A</b>ustralia</div>
   <div class="pac-item"><b>A</b>bbas Town, Karachi, Sind, Pakistan</div>
   <div class="pac-item"><b>A</b>ustria</div>
   <div class="pac-item"><b>A</b>rgentina</div><div class="pac-item"><b>A</b>rizona</div>     
  </div>

js

$('.remove').live('click', function () {
  console.log("working");
});

So your solution is to add the above click function after appending the below div 

          <div class="pac-item remove">This is me </div>
sachin
  • 13,605
  • 14
  • 42
  • 55
  • You don't need to the click binding **after** appending the div - the "on" binding needs configuring in the document ready event after which any dynamically added elements matching the selector will subscribe to the event. – connectedsoftware May 27 '13 at 08:54
  • @CSL Thank you...Now only i came to know that we can do this using document.on method.In past i used to do this in the above mentioned way. Hereafter i will use that document.on method. – sachin May 27 '13 at 08:58
0

Since your div is appended dynamically, I think your click event code should be placed after the div is appended. Otherwise $('.remove') will return 'null', your click event will not work.

Sasori
  • 1
  • 4