CODEWITHSUNDEEP
javascriptjquery
Lilluda 5
Lilluda 5

Reputation: 1109

Events being bound twice or more jquery

I'm trying to generate html on the fly with javascript. I'm binding on the click of buttons on my page. There are multiple buttons on my page which are causing my elements to be bound multiple times which produces the desired results to appear in the amount of times the button has been clicked.

My question is there something that can check if a element is already bound in jquery? If so, how do I incorporate that with the .live() function in jquery.

Here is my code: 

$(document).ready(

    function () {
        $(':button').live("click", ".textbox, :button", function () {
            alert("binding");
            $(".textbox").click(function () {
                defaultVal = this.defaultValue;
                if (this.defaultValue) {
                    this.value = "";
                }
            });
            $(".textbox").blur(function () {
                if (this.value == "") {
                    this.value = defaultVal;
                }
            });
            $('[name="numsets"]').blur(function () {
                if (!parseInt(this.value)) {
                    $(this).val("you need to enter a number");
                }
            });
            $('[name="weightrepbutton"]').click(function () {
                var $numsets = $(this).parent().children('[name="numsets"]');
                if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
                    var numbersets = parseInt($numsets.val())
                    repandweight.call(this, numbersets)
                    $(this).hide();
                    $numsets.hide();
                }
            })
        });
    });

The problem is line 4, every time a button is clicked, all functions that were previous bound seem to be bound to the same function twice, which is a problem.

Thanks for the help!

Upvotes: 0

Views: 287

Answers (1)

Shyju
Shyju

Reputation: 218722

You are doing it twice ! One inside another. Take out the outer binding and it should work

$(document).ready(function () {

      $(document).on("click",".textbox",function () {
          defaultVal = this.defaultValue;
          if (this.defaultValue) {
               this.value = "";
          }
      });

      $(document).on("blur",".textbox",function () {
          var item=$(this);
          if (item.val() == "") {
               item.val(defaultVal);
          }
      });

      $(document).on("blur","input[name='numsets']",function () {
          var item=$(this);
          if (!parseInt(item.val())) {
                item.val("you need to enter a number");
          }
      });

      $(document).on("click","input[name='weightrepbutton']",function () {
                var $numsets = $(this).parent().children('[name="numsets"]');
                if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
                    var numbersets = parseInt($numsets.val())
                    repandweight.call(this, numbersets)
                    $(this).hide();
                    $numsets.hide();
                }
      })            
    });

if you are using jQuery 1.7+ version, consider switching to jQuery on instead of live.

EDIT: Updated live to on as OP mentioned it in the comment.

Upvotes: 3

Related Questions