Click events fire multiple time

Question

I checked previous questions, but does not get any help. I write this script in my header file:

     <script type="text/javascript">

     $(function () {
          var as=       $("#dialog1").dialog({
            autoOpen: false,
            height:700,
            width:700
        });
      $("#register").unbind().click(function () {          
        var url="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=site/register";
        as.load(url).dialog("open");
        });
      $("#login").unbind().click(function () {          
        alert("click on login fired.");
      var url="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=site/login";
        as.load(url).dialog("open");
        });
         $(".ui-state-default .ui-icon").click(function () { as.dialog("close");});
                  $(".com").unbind().click(function () {
                var element = $(this);
                var id = element.attr("id");
            var url='<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=video/comments&video_id='+id;
            as.load(url).dialog("open");
            });

         $(".smile").unbind().click(function () {
                var element = $(this);
                var id = element.attr("id");            
                var url="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=video/smiles&video_id="+id;
                as.load(url).dialog("open");
            });



        });
    </script>

'Login' and 'Register' click events for header, And remaining two events for another page. when i go to that page, i first i click on 'login' after that again i click on login, click event calls only one time, But when i click third time on 'login', then login click event fire three times, Again when i click on this, Then number of fire events on login increase. can anybody tel me the reason behind this?

possible duplicate of [jQuery click events firing multiple times](http://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times) — Nano, Jun 14 '14 at 09:15
@Nano: The OP is already using the method suggested in the answer. — Guffa, Jun 14 '14 at 09:22
possible duplicate of http://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times">jQuery click events firing multiple times — Pratik Joshi, Jun 14 '14 at 10:22
It's not. Please read carefully what i am asking. Then give negative votes. — Mangita, Jun 14 '14 at 11:06

Shaunak D · Answer 1 · 2014-06-14T09:51:52.347

1

Why don't you use .one()

$("#login").one('click',function () {          
    alert("click on login fired.");
    var url="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=site/login";
    as.load(url).dialog("open");
});

And

$("#register").one('click',function () {          
    var url="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=site/register";
    as.load(url).dialog("open");
});

For class selector based click event .one() wont work,

use this: Updated Demo

$('.com').click(function(){
    //...
    //...
    //your function

    $(this).unbind();
});

edited Jun 14 '14 at 09:51

answered Jun 14 '14 at 09:16

Shaunak D

20,588
10
46
79

I modified my code as you said. but now 'com' and 'smile' click events fires multiple times. I allready added .one function (as you said) on com and smile but still fires multiple times. – Mangita Jun 14 '14 at 09:33
It is because there might be multiple elements with class `com` and `smile`. `$('.com')` uses a class based selector – Shaunak D Jun 14 '14 at 09:34
Ya, There is multiple elements, Which is created dynamically. – Mangita Jun 14 '14 at 09:36
Add `$('.com').unbind()` at the last line of click event. – Shaunak D Jun 14 '14 at 09:36
i modified my code by this: http://pastebin.com/MqHh9ZDc and now all the things not working correctly. sometimes dialog-box opens, some time not. – Mangita Jun 14 '14 at 09:41
You did not change this `$(".ui-state-default .ui-icon").click(function () { as.dialog("close");})` I still see `.click()` – Shaunak D Jun 14 '14 at 09:43
but this is for close button image of dialog box. – Mangita Jun 14 '14 at 09:44
Check the demo i have updated. If .one() does not work use the demo – Shaunak D Jun 14 '14 at 09:44
In your demo when i click on com alert shown, but when again i click on com alert not shown. so this demo is not right, Because when user clicks on comments then comment info shown, user close this dialog and again click on another comment then dialog will be open with that comment information. – Mangita Jun 14 '14 at 09:48
What do u exactly want, do you want it to fire multiple time or not? – Shaunak D Jun 14 '14 at 09:50
listen my problem is when i click on login a dialog box is opened, only one dialog box with one alert. When i click second time on login then 2 dialog box opened with two alerts, and when i click third time then 3 dialog box opened with three alert. I want to open only one dialog box each time i click. for example when i click second time then one dialog box will be shown with one alert. – Mangita Jun 14 '14 at 09:54
Here is the demo, which is not working correctly. you can see by multi ple click on login after com click. http://66.235.194.119/indiamap/smile/index.php?r=video/library – Mangita Jun 14 '14 at 11:41

score 0 · Answer 2 · answered Jun 14 '14 at 09:19

0

 $("#login").one("click", function(e) {          
      alert("click on login fired.");
      var url="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=site/login";
      as.load(url).dialog("open");
 });

answered Jun 14 '14 at 09:19

RGS

5,131
6
37
65

you can't execute php in client side (javascript/...) – Lajos Veres Jun 14 '14 at 09:57
This is in yii framework so u can do here and its working now – Mangita Jun 14 '14 at 10:01

Click events fire multiple time

2 Answers2