Click meJS Code: $("#close")...">
Geek asks and answers

JQuery 'click' automatically launches 'live'

Here is a simple piece of code:

HTML:

<div id="close">Click me</div>

JS Code:

$("#close").click(function(){
    alert("1");
    $(this).attr('id','expand');
});



$("#expand").live('click', function(){
    alert("2");
    $(this).attr('id','close');            
});

Problem: when I click close, it automatically calls live (). See This in jsfiddle: http://jsfiddle.net/uFJkg/

Is it because I am changing the same element id from "close" to "expand"? How to fix this problem?

I tried:

 $("#expand").die().live('click', function()

but it didn’t work. I tried event.stopPropagation (), but that didn't help either. I tried to have a separate div with id "expand" and hide it on document.ready, but for some reason it doesn't work either.

Then I tried from the moment I read that live () is deprecated in jQuery 1.7 +:

$("#expand").on('click', function(){

and it doesn’t work either.

Any thoughts? I think that a fresh set of eyes will be able to determine what I do not see.

Thank.

+5
3

(aka live). id , id DOM.

$("body").on("click", "#close", function(){
    alert("1");
    $(this).attr('id','expand');
});

$("body").on("click", "#expand", function(){
    alert("2");
    $(this).attr('id','close');            
});

DEMO

live() deprecated, live() .on() .

+10

, live .

.live document. , , target . , .live, .

, #close, :

  • click, #close, .
  • #close #expand
  • click DOM , document
  • document, , #expand,

stopPropagation() :

$("#close").click(function(e){
  if(!e) { e = window.event; }
  e.stopPropagation();

  alert("1");
  $(this).attr('id','expand');
});

live delegate on .

ID. - , close/expand:

<div id="toggler" class="close">Close</div>

$('#toggler').on('click',function() {
    $(this).toggleClass('close').toggleClass('expand');
});

, ,

+3

, id. .

. jQuery , data.

Eg.

$("#myObject").data("expanded", true);

, .

0

More articles:


All Articles