Sourav's Blog

jquery live/die

live:

Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events.

<script>
  $(document).ready(function(){
    
    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

  });
  </script>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>

 <p>Click me!</p>
  <span></span>


die:

This does the opposite of live, it removes a bound live event.Without any arguments, all bound live events are removed.
You can also unbind custom events registered with live.
<script>
  $(document).ready(function(){
    
    function aClick() {
      $("div").show().fadeOut("slow");
    }
    $("#bind").click(function () {
      $("#theone").live("click", aClick)
                  .text("Can Click!");
    });
    $("#unbind").click(function () {
      $("#theone").die("click", aClick)
                  .text("Does nothing...");
    });

  });
  </script>
  <style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
  </style>

 <button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>


				

			

jquery Events/trigger

This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing ‘submit’ to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.

<script>
  $(document).ready(function(){

    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');
      update($("span:last"));
    });
    function update(j) {
      var n = parseInt(j.text(), 10);
      j.text(n + 1);
    }
  });
  </script>
  <style>
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
  </style>
  <button>Button #1</button>
  <button>Button #2</button>
  <div><span>0</span> button #1 clicks.</div>
  <div><span>0</span> button #2 clicks.</div>

jquery Events/bind/unbind

Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, ready

<style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>

<script>
$(document).ready(function(){

$(“p”).bind(“click”, function(e){

      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });
});
</script>
<p>Paragraph</p>
<span></span>

Unbind:

Without any arguments, all bound events are removed. If the type is provided, all bound events of that type are removed. If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.
You can also unbind custom events registered with bind.

<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
$(document).ready(function(){
function aClick() {
$(“div”).show().fadeOut(“slow”);
}
$(“#bind”).click(function () {
// could use .bind(‘click’, aClick) instead but for variety…
$(“#theone”).click(aClick).text(“Can Click!”);
});
$(“#unbind”).click(function () {
$(“#theone”).unbind(‘click’, aClick).text(“Does nothing…”);
});
});
</script>
<button id=”theone”>Does nothing…</button>
<button id=”bind”>Bind Click</button>
<button id=”unbind”>Unbind Click</button>
<div style=”display:none;”>Click!</div>

jquery addClass & removeClass

<style>
.red
{
background-color:#CC0033;
color:green;
font-weight:bold;
}
.green
{
background-color:#003300;
color:red;
font-weight:bold;
}
#myDiv
{
border:3px double #000000;
}
</style>
<script>
$(document).ready(function(){
$(“#addclass_red”).click(function ()
{
$(“#myDiv”).addClass(“red”);
$(“#myDiv”).removeClass(“green”);
});
$(“#addclass_green”).click(function ()
{
$(“#myDiv”).addClass(“green”);
$(“#myDiv”).removeClass(“red”);
});
});
</script>
<div id=”myDiv” style=”width:100px; height:30px;”>div 1</div>
<input type=”button” id=”addclass_red” name=”addclass_red” value=”Add Red” />
<input type=”button” id=”addclass_green” name=”addclass_green” value=”Add Green” />
when click on “Add Red” button the function add red class to div myDiv & removing the class green.

similarly, when click on “Add Green” button the function add greenclass to div myDiv & removing the class red.

JQUERY next()

we can access the div or span… using jquery next() function.

$(document).ready(function(){
$(“#myDiv”).css(“border”,”3px solid red”);
$(“#myDiv”).click(function ()
{
$(this).hide(“slow”);
$(this).show(“slow”, function(){
$(this).css(“border”,”3px solid blue”);
$(this).next(‘div’).next(‘span’).css(“color”,”red”);
});
});
});

<div id=”myDiv” style=”width:100px; height:30px;”>div 1</div>
<div>div 2</div>
<span>span 1</span>

In this example i accessed the span that is next to div2 which is next to div1(div1->div2->span1) by jquery next function.

Example: 2

<script>
$(document).ready(function(){
$(“button[disabled]“).next().text(“this button is disabled”);
});
</script>
<style>
span { color:blue; font-weight:bold; }
button { width:100px; }
</style>
</head>
<body>
<div><button disabled=”disabled”>First</button> – <span></span></div>
<div><button>Second</button> – <span></span></div>
<div><button disabled=”disabled”>Third</button> – <span></span></div>
</body>
</html>