JQuery click() function is not working

Question

So, Below is my JQuery code. I'm simply trying to change the inAddMode boolean variable to the opposite of what it is when my button with id add_button is pressed. The alert box is there for testing, but it never triggers when I press add_button button. Any ideas why this is not working. add_button is an image, Would that affect it?

var inAddMode = false;

$(document).ready(function(){
    $('#add_button').click(function(){
            inAddMode = !inAddMode;
        alert(inAddMode);
    });
    //For Adding events on the map
        $('#map').click(function(e){
            if(inAddMode){
                var img = $('<img src="img/map_pin.png" />');
                var mapWidth = $("#map_img").width();
                var mapHeight = $("#map_img").height();

                //Must keep the pixel ratio of original image constant
                var mapPinWidth = mapWidth*(0.08);
                var mapPinHeight = mapPinWidth;

                var offsetLeft = mapPinWidth/2;
                var offsetTop = mapPinHeight;

                img.css({
                    position: 'absolute',
                    width: mapPinWidth,
                    height: mapPinHeight,
                    left: e.pageX-offsetLeft,
                    top: e.pageY-offsetTop,
                    cursor: 'pointer'
                });
                $("#map").append(img);
            //Now make the app take you to the event creation page
            }
        });


    //end of addMode
});

Full HTML Code

<!DOCTYPE html>

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/app.js"></script>

</head>

<body>

    <!--<img src="img/map_north.PNG" style="width:  100%;height: 45%;">
    <img src="img/map_south.PNG" style="width: 100%; height: 45%;">
    -->
    <div id="map">
        <img id="map_img" src="img/map.PNG" style=" position: relative; width: 100%;height: auto; border-style: solid"> 


            <script>
                var mapWidth = $('#map_img').width();
                var mapHeight = $('#map_img').height();
                var addSignWidth = mapWidth*(0.04);
                var addSignHeight = addSignWidth;

                var addSign =  $('<img src="img/add_img.png" >');
                var offsetLeft = addSignWidth;
                var offsetTop = addSignHeight;

                addSign.css({
                    id: 'add_button',
                    position: 'absolute',
                    width: addSignWidth,
                    height: addSignWidth,
                    left: mapWidth-offsetLeft - mapWidth*(0.001),
                    top:  mapHeight*(0.04) ,
                    cursor: 'pointer'
                });

                $("#map").append(addSign);

            </script>

            <!---<img src="img/add_img.png" style=<script>getAddButtonInfo()</div>>-->
    </div>
</body>

Have you checked putting debugger in your Click function? or any error in browser Console? — Mayank Patel, Feb 20 '16 at 08:43
I'm not completely sure, but I believe `click` events are detectable only on links, buttons and that sort of clickable stuff. If you want to make an image clickable, wrap it inside an anchor element ``: `` and then add the `event.preventDefault();` to your jQuery event so the anchor doesn't follow its `href`. — Alejandro Iván, Feb 20 '16 at 08:44
Maybe [this](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements)? @AlejandroIván Nope, (almost) all visible elements are clickable. — Teemu, Feb 20 '16 at 08:45
check that you are using correct id 'add_button', open the view source of the page and confirm that. Also make sure it is not a typo mistake. — Nitin Garg, Feb 20 '16 at 08:48
i have seen where you created the img dyamically with jquery and also gave it attributes with .css jquery. cover your script in the HTML part with document.ready since you are using jQuery — Transformer, Feb 20 '16 at 10:11
can you pls make a fiddle of your code and post i will make it work — Transformer, Feb 20 '16 at 10:36
never mind check my updated answer and see the solution to your problem and how i did it — Transformer, Feb 20 '16 at 14:40

score 0 · Answer 1 · answered Feb 20 '16 at 08:46

0

Maybe you're adding #add_button dynamically? In that case you should use delegation, for example

$('body').on('click', '#add_button', function(){
  inAddMode = !inAddMode;
  alert(inAddMode);
});

answered Feb 20 '16 at 08:46

Lenar Fattahov

141
8

I am adding it dynamically. I put the html up. But even using this method it isn't working. Any other ideas? – Benjamin Mathers Feb 20 '16 at 10:11
As been said below, you forgot to add id to your `#map_img` – Lenar Fattahov Feb 20 '16 at 10:57

Transformer · Answer 2 · 2016-02-21T18:41:15.077

UPDATE

$(document).ready(function(){ 
   //initial values started here
    var mapWidth = $('#map_img').width();
    var mapHeight = $('#map_img').height();
    var addSignWidth = mapWidth*(0.04);
    var addSignHeight = addSignWidth;

    var addSign = $('<img src="img/map_pin.png" />'); //Equivalent: $(document.createElement('img'))
    addSign.attr('id', "add_button");
    addSign.css({'cursor': 'pointer' });
     //i remove these from the above code which seem to move the element of the screen with left and top attribute given to it
    //left: mapWidth-offsetLeft - mapWidth*(0.001),
        //top:  mapHeight*(0.04);
    //'position':'absolute';
    //'width': addSignWidth,
    //'height': addSignWidth,
    var offsetLeft = addSignWidth;
    var offsetTop = addSignHeight;
    
    $("#map").append(addSign);
    // initial values ended here


    
    var inAddMode = false;
    $('#add_button').click(function(){
        inAddMode = !inAddMode;
        alert(inAddMode);
    });
    //For Adding events on the map
        $('#map').click(function(e) {
            if(inAddMode){
                var img = $('<img src="img/map_pin.png" />');
                var mapWidth = $("#map_img").width();
                var mapHeight = $("#map_img").height();

                //Must keep the pixel ratio of original image constant
                var mapPinWidth = mapWidth*(0.08);
                var mapPinHeight = mapPinWidth;

                var offsetLeft = mapPinWidth/2;
                var offsetTop = mapPinHeight;
                img.css({                  
                    'cursor': 'pointer',
                    'position': 'absolute',
                });
                // i did remove these again from the code above which is these
                //'position': 'absolute',
                //'width': mapPinWidth,
                //'height': mapPinHeight,
                //'left': e.pageX-offsetLeft,
                //'top': e.pageY-offsetTop,
                img.insertAfter($("#map"));
                //to see the img  i added background-color to see the last result well
            }
        });
     
    //end of addMode
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--<img src="img/map_north.PNG" style="width:  100%;height: 45%;">
    <img src="img/map_south.PNG" style="width: 100%; height: 45%;">
    -->
    <div id="map">
        <img id="map_img" src="img/map.PNG" style="position: relative; width: 100%;height: 50px; border-style: solid"> 
        
    </div>

NOW WHAT DID I DO

These are changes i made to make your code work

i remove the codes script tag in your html part which you posted and put them together with other JQuery codes, which was only a choice not necessary important but to organize.
i editted the addSign.css(), removing only left, top, height and width, which made the addSign wonder off the screen
i gave addSign id attribute which is add_button
$("#map).click() function, i also editted the img.css(), removing left, top, width and height which also made the result off the screen.

Now the problem is solved and the code is working. those css atrributes you still add them but this time make your calculations correctly so you will be able to see your solution.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. He is using jquery so it changes alot — Transformer, Feb 20 '16 at 09:28
yeah it is but assuming he tries the .click function with pure javascript and no jquery it will work — Transformer, Feb 20 '16 at 09:38
Please tell me what is the difference between `{prop: value}` and `{"prop": value}`??? — Teemu, Feb 20 '16 at 20:20
propertyname is not a variable rather a css property. so accessing the css property should be enclosed with quotes — Transformer, Feb 20 '16 at 20:27
without quotes it wont work, try it out and you will see for yourself — Transformer, Feb 20 '16 at 20:30
I really don't know what you're talking [about](https://jsfiddle.net/L3p1qnu2/). The argument passed to `.css` is an object literal, it doesn't need property names being quoted (but allows it). If you passed a string, then quoting would be mandatory. — Teemu, Feb 21 '16 at 16:31
Oh yes seems you are right, i have editted my answer, i got that from w3school.. Thanks — Transformer, Feb 21 '16 at 18:42

Teemu · Accepted Answer · 2016-02-21T16:33:49.057

0

$('#add_button') doesn't contain any elements when the DOM is ready. This is because you haven't set id for the image button. Instead you've this code:

addSign.css({
    id: 'add_button',
          :
}

But setting id property in CSS rule doesn't set id of an element. You need this instead:

addSign.prop('id', 'add_button');

Notice also, that the position properties you've set need an unit.

edited Feb 21 '16 at 16:33

answered Feb 20 '16 at 10:38

Teemu

21,017
6
49
91

This worked perfectly! Thanks bunches! So is id not actually a css property? – Benjamin Mathers Feb 23 '16 at 20:25
Yep, `id` is not a CSS property. You can link an element to CSS rules with an `id` selector though, but that's a different feature. – Teemu Feb 23 '16 at 20:28

JQuery click() function is not working

3 Answers3