jQuery .click not firing up

Question

I have a link (imp), when I click on this link it shows a div. On this div there is a minus sign to reduce this div. When I reduce this div I'm adding a plus sign to bring up this div again.

the problem is just on the plus sign.

$('.plusStep1').click(function() {
  $('#plus').empty();
  $('#step1').css('display','block');
  $(".close-step1 img")
    .attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");

This code above seems to work only when I execute it in the console!

Here is a test on fiddle.

It works here? Opera 12.01, what are you using? Are you getting any errors in your JavaScript console? — Gerald Versluis, Aug 27 '12 at 07:28
really? does the click on the plus sign works? No errors, i tested it in FF and chrome. — user472285, Aug 27 '12 at 07:30
Ah sorry, just used the imp link :-) Indeed the plus sign seems a little buggy — Gerald Versluis, Aug 27 '12 at 07:32

score 1 · Answer 1 · answered Aug 27 '12 at 07:36

.click doens't work on dynamically created elements, if you want to bind functions to elements you create after the DOM has loaded you're best to use delegate: http://api.jquery.com/delegate/

So to bind this function to all elements, whether created after the DOM or not, you could use something like;

$("#myContainer").on("click", ".PlusStep1", function() {
  $(this).toggleClass("chosen");
});

Where all your PlusStep1 class elements are children (or descendants) of the element with id myContainer., i.e. they're inside it, doesn't matter how deep.

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

The .click() is not bound to a newly create element. You could create a seperate function which does what you want (on the plus click) and when you create the anchor call

bind('click', function() {
   seperateFunction();
})

update: Sorry, more easily live should do the trick (see jQuery doc)

2nd update: see another stackoverflow post

edited May 23 '17 at 10:34

Community

1
1

answered Aug 27 '12 at 07:31

Jens

2,050
1
14
30

score 0 · Answer 3 · answered Aug 27 '12 at 07:34

0

change your selector to $('#plus').click(function() { because the plus sign does not have th class plusStep1 but has the id plus

I saved the updated fiddle

answered Aug 27 '12 at 07:34

robasta

4,621
5
35
53

score 0 · Answer 4 · answered Aug 27 '12 at 07:36

try this

jQuery(function( $ ){

        // Get a reference to the container.
        var containerStep1 = $( "#step1" );

        // Bind the link to toggle the slide.
        $( ".impaye" ).click(
        function( event ){
        // Prevent the default event.
        event.preventDefault();

        // Toggle the slide based on its current
        // visibility.
        if (containerStep1.is( ":visible" )){
        containerStep1.slideUp( 1000 );
        } else {
        containerStep1.slideDown( 1000 );
        }
        }
        );


        // CLOSE STEPS

        $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");
        // STEP 1
        $('.close-step1').click(function () {
            $('#plus').empty();
            $('.close-step1').clone().appendTo('#plus');
            $('#plus .close-step1').addClass('plusStep1');

            containerStep1.slideToggle("slow", function () {
                if ($("#step1").is(':visible')) {
                    $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");
                }
                else {
                    $(".close-step1 img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/3/30/OCR-A_char_Plus_Sign.svg");
                    $('.plusStep1').bind('click',plustep1);
                }

            });
        });
        function plustep1() {
            $('#plus').empty();
            $('#step1').css('display','block');
            $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");

        }


        });

score 0 · Answer 5 · answered Aug 27 '12 at 07:37

0

You can also use the follwing

 $('.plusStep1').live('click',function() {

//---------Your Code----------
})

or 
 $('.plusStep1').bind('click',function() {
//---------Your Code----------
})

answered Aug 27 '12 at 07:37

Sumit Neema

462
3
18

anxiety · Answer 6 · 2012-08-27T07:51:02.313

I think you're making this harder than it needs to be. Maybe in trying it this way it will work out for you.

html

<a href="#" class="trigger">img</a>

<div id="togglable" style="display:none;">
  <a href="#" class="trigger">Hide me</a>
  content content content
</div>

js

$(".trigger").click(function() {
  $("#togglable").toggle();
});

And then you can add a bit of logic to change the src properties of your trigger elements to incorporate your + and - images.

Benefit being there is no need for live bindings.

jQuery .click not firing up

6 Answers6