Question

所以，下面是我的JQuery代码。我只是尝试将inAddMode布尔变量更改为与按下标识为add_button的按钮时相反的情况。警报框用于测试，但是当我按下add_button按钮时，它永远不会触发。任何想法为什么这不起作用。 add_button是一张图片，会影响它吗？

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
});

完整的HTML代码

<!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>

Answer 1

也许您是动态添加#add_button？在这种情况下，您应该使用委托，例如

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

Answer 2

<强>更新

＆＃13;

$(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
});

＆＃13;

<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>

＆＃13;

现在我做了什么

这些是我为使您的代码工作所做的更改

我删除你发布的html部分中的代码脚本标记，并将它们与其他JQuery代码放在一起，这只是一个选择，不是必需的，但要组织。
我编辑了addSign.css()，只删除了left，top，height和width，这使addSign奇迹从屏幕上移开
我提供了addSign id属性add_button
$("#map).click()函数，我还编辑了img.css()，移除了left，top，width和height，这也取消了结果屏幕。

现在问题解决了，代码正常运行。那些css atrributes你仍然添加它们，但这一次使你的计算正确，所以你将能够看到你的解决方案。

Answer 3

当DOM准备好时，

$('#add_button')不包含任何元素。这是因为您尚未为图像按钮设置id。相反，你有这个代码：

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

但是在CSS规则中设置id属性不会设置元素的id。你需要这个：

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

另请注意，您设置的位置属性需要一个单位。

JQuery click（）函数不起作用

3 个答案: