Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post

    Cool Tips on Focusing Clicks?

    I have a container that takes clicks and upon a click does a function. I also have a button on the container that I want to click to pursue and action. The problem is that when I click on the button, it fires two events. Any suggestion on how to make it so that the event is only on the button.
    Thanks

    Here's some code in case:


    Code:
      $("#background").click(
                function insertImage(event) {
                    $(".chooser").show();
    
                    var x = event.clientX;
                    var y = event.clientY;
                    var imgtag = '<img src="images/chasdf.png" style ="position: absolute; left: xvaluepx; top: yvaluepx;">';
                    imgtag = imgtag.replace("xvalue", x);
                    imgtag = imgtag.replace("yvalue", y);
                    $(".p").append(imgtag);//for more general code. Create target function and replace .container with $target
                });
    
    //removes latest pitch
    
    //$(".chooser").dialog({modal: true});
    //var modal = $(".chooser").dialog({modal: true});
    
        $("#remove").one("click", function() {
            var $lastinput = $(".p :last-child");
            if ($lastinput) {
                $lastinput.remove();
            }
            $(".chooser").hide();
        }
        );

  • #2
    New Coder
    Join Date
    May 2005
    Location
    New Zealand
    Posts
    76
    Thanks
    0
    Thanked 6 Times in 6 Posts

    Post Event bubbling

    I believe the issue is with event 'bubbling' because the button is in the container that also has an onClick event handler.

    In the button's onClick handler, try adding the following to the last line...
    Code:
    event.stopPropagation();
    You will also need to accept the event object as an argument of your function, so you code will need to be...
    Code:
    $("#remove").one("click", function(event) {
            var $lastinput = $(".p :last-child");
            if ($lastinput) {
                $lastinput.remove();
            }
            $(".chooser").hide();
            event.stopPropagation();
        }
        );
    See http://api.jquery.com/event.stopPropagation/ for more info.

  • Users who have thanked DougMck for this post:

    and0rsk (11-01-2013)

  • #3
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post
    event.stopPropagation() worked like a charm. Thanks.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •