Skip to main content
Code Review

Return to Question

replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link

Please note that I read this this in order to fix my JavaScript up to achieve the current code which works.

Please note that I read this in order to fix my JavaScript up to achieve the current code which works.

Please note that I read this in order to fix my JavaScript up to achieve the current code which works.

added 44 characters in body; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Is there a way to avoid calling the document with jQuery on click?

I have taken a look at several answered questions on stackoverflowStack Overflow about jQuery's new (since 1.9.1 upgrade) .on('click','',function(){}

.on('click','',function(){}

and that you need to delegate. However, in each one, it just provides the solution to fix the issue, but I need a bit more finest or an explanation to why it must be done like that.

Here is my code segment which I have already made it working, my. My question will follow after the code.

theThe second one (which is where I have confusion on) enables a way to remove (or delete) a row from the drop down.

  1. When the HTML used to be static, I can do both the operation of toggling the htmlHTML and the deletion of the row without issues. However when I now append the row, I could no longer remove the row by hitting the second on('click')on('click'). So I had to modify it with $(document)$(document) and then shift the .header-shopping-cart-items .item a into the delegation position. I don't know why it is that.

  2. Must I use the document as the starting point of the delegation? Is it because these rows are not statically there at first and were actually generated later via an event.

  3. If I want to omit

     jQuery(document).ready(function($){
 //code
 });

3)If I want to omit

jQuery(document).ready(function($){
//code
});

Please note that I read http://stackoverflow.com/questions/17878276/on-click-not-working-in-jquery-1-9-1this in order to fix my javascriptJavaScript up to achieve the current code which works but.

Is there a way to avoid calling the document with jQuery on click

I have taken a look at several answered questions on stackoverflow about jQuery's new (since 1.9.1 upgrade) .on('click','',function(){}

and that you need to delegate. However in each one it just provides the solution to fix the issue but I need a bit more finest or an explanation to why it must be done like that.

Here is my code segment which I have already made it working, my question will follow after the code.

the second one (which is where I have confusion on) enables a way to remove (or delete) a row from the drop down.

  1. When the HTML used to be static, I can do both the operation of toggling the html and the deletion of the row without issues. However when I now append the row, I could no longer remove the row by hitting the second on('click'). So I had to modify it with $(document) and then shift the .header-shopping-cart-items .item a into the delegation position. I don't know why it is that.

  2. Must I use the document as the starting point of the delegation? Is it because these rows are not statically there at first and were actually generated later via an event.

3)If I want to omit

jQuery(document).ready(function($){
//code
});

Please note that I read http://stackoverflow.com/questions/17878276/on-click-not-working-in-jquery-1-9-1 in order to fix my javascript up to achieve the current code which works but

Is there a way to avoid calling the document with jQuery on click?

I have taken a look at several answered questions on Stack Overflow about jQuery's new (since 1.9.1 upgrade)

.on('click','',function(){}

and that you need to delegate. However, in each one, it just provides the solution to fix the issue, but I need a bit more finest or an explanation to why it must be done like that.

Here is my code segment which I have already made it working. My question will follow after the code.

The second one (which is where I have confusion on) enables a way to remove (or delete) a row from the drop down.

  1. When the HTML used to be static, I can do both the operation of toggling the HTML and the deletion of the row without issues. However when I now append the row, I could no longer remove the row by hitting the second on('click'). So I had to modify it with $(document) and then shift the .header-shopping-cart-items .item a into the delegation position. I don't know why it is that.

  2. Must I use the document as the starting point of the delegation? Is it because these rows are not statically there at first and were actually generated later via an event.

  3. If I want to omit

     jQuery(document).ready(function($){
 //code
 });

Please note that I read this in order to fix my JavaScript up to achieve the current code which works.

Source Link
azngunit81
  • 1.2k
  • 1
  • 12
  • 19

Is there a way to avoid calling the document with jQuery on click

I have taken a look at several answered questions on stackoverflow about jQuery's new (since 1.9.1 upgrade) .on('click','',function(){}

and that you need to delegate. However in each one it just provides the solution to fix the issue but I need a bit more finest or an explanation to why it must be done like that.

Here is my code segment which I have already made it working, my question will follow after the code.

jQuery(document).ready(function($){
 /* Shopping Cart Items */
 $(".header-shopping-cart div .toggle-items").on('click', function(){ // Show/Hide Shopping Cart Items
 if ($(".header-shopping-cart-items").css("display") == "none" && $("#items-amount").html() > 0) {
 $(".header-shopping-cart-items").fadeIn();
 $(this).find("i").removeClass("icon-angle-right").addClass("icon-angle-down");
 }
 else {
 $(".header-shopping-cart-items").fadeOut();
 $(this).find("i").removeClass("icon-angle-down").addClass("icon-angle-right");
 }
 return false;
 });
 $(document).on('click','.header-shopping-cart-items .item a', function(){
 var amount = $("#items-amount").html();
 if (amount > 0) {
 $("#items-amount").html(amount - 1); // Dicrease the amount of SC items
 $(this).parent().slideUp(); // Hide this item
 if (amount - 1 == 0) {
 $(".header-shopping-cart-items").fadeOut(); // When there's no any items in the cart, hide the items block
 $(".header-shopping-cart div .toggle-items i").fadeOut();
 }
 }
 return false;
 });
});

The short end of the code basically have two purpose: one the toggle makes it so that when press a drop down opens up.

the second one (which is where I have confusion on) enables a way to remove (or delete) a row from the drop down.

My questions:

  1. When the HTML used to be static, I can do both the operation of toggling the html and the deletion of the row without issues. However when I now append the row, I could no longer remove the row by hitting the second on('click'). So I had to modify it with $(document) and then shift the .header-shopping-cart-items .item a into the delegation position. I don't know why it is that.

  2. Must I use the document as the starting point of the delegation? Is it because these rows are not statically there at first and were actually generated later via an event.

3)If I want to omit

jQuery(document).ready(function($){
//code
});

I should have done IIFE instead - however is there a "trap" in doing so. Trap as in must I start changing the code structure around in order to achieve the same effect.

Please note that I read http://stackoverflow.com/questions/17878276/on-click-not-working-in-jquery-1-9-1 in order to fix my javascript up to achieve the current code which works but

default

AltStyle によって変換されたページ (->オリジナル) /