jQuery 函数在 JSFiddle 上有效，但在我的 html 文档中无效

Question

我有一个函数可以将 x px 的 margin-left 添加到 "Karusell"，这是一个 div-box。我还有一个函数，每次我们使用第一个函数时都会将“1”添加到 nextClicked。当 nextClicked 为 2 时，单击第一个函数时不应添加任何边距。这在 JSFiddle 中工作得很好，但在我的 HTML 文档中不起作用，我不知道为什么。

body {
    background-color: #e0e0e0;
    position: relative;
}

#bokse1 {
    width: 100px;
    height: 100px;
    background-color: blue;
}

#bokse2 {
    width: 100px;
    height: 100px;
    background-color: red;
}

#Karusell {
    width: 1040px;
    height: 300px;
    background-color: indigo;
    display: absolute;
}

<head>
    <link rel="stylesheet" href="css.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>


<body>

    <div id="bokse1"></div>
    <div id="bokse2"></div>

    <div id="Karusell"></div>

    <script>
        currentNextClicked = 0;

        nextClicked = 0;

        $(document).ready(function () {

            $("#bokse1").click(function () {
                if (nextClicked != 2)
                    $("#Karusell").animate({
                        marginLeft: ["+=100px", "linear"],
                    }, 400, function () {});
            });

            $('#bokse1').live('click', function () {
                if (nextClicked != 2) {
                    currentNextClicked = nextClicked;
                    nextClicked = currentNextClicked + 1;
                    console.log(nextClicked)
                }
            });

        });
    </script>

</body>

这是 JSFiddle：http://jsfiddle.net/vbLjcpx1/11/

正如我们在 JSFiddle link 中看到的那样，我们第二次使用该函数时没有添加边距，这也应该发生在我的 HTML 文档中。

Answer 1

您正在使用更新版本的 jquery，其中 live() 函数已弃用，请改用 on() 函数

<script>

currentNextClicked = 0;

nextClicked = 0;

$(document).ready(function() {

  $("#bokse1").click(function() {
  if (nextClicked != 2)
$("#Karusell").animate({
  marginLeft: ["+=100px", "linear"],
}, 400, function() {
});
});

  $('#bokse1').on('click', function(){
      if (nextClicked != 2) {
      currentNextClicked = nextClicked;
      nextClicked = currentNextClicked + 1;
      console.log(nextClicked)
  }});

});

  </script>

Answer 2

currentNextClicked = 0;

nextClicked = 0;

$(document).ready(function() {

  $("#bokse1").click(function() {
  if (nextClicked != 2)
$("#Karusell").animate({
  marginLeft: ["+=100px", "linear"],
}, 400, function() {
});
});

  $('#bokse1').on('click', function(){
      if (nextClicked != 2) {
      currentNextClicked = nextClicked;
      nextClicked = currentNextClicked + 1;
      console.log(nextClicked)
  }});

});

.nextButtonFalse{display:none;}
.prevButtonFalse{display:none;}

#bokse1 {width:20px;height:20px;background-color:blue;}
#bokse2 {width:20px;height:20px;background-color:red;}
#Karusell{width:30px;height:30px;background-color:indigo;display:absolute;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bokse1"></div>
<div id="bokse2"></div>

<div id="Karusell">

jQuery - how to use the “on()” method instead of “live()”?

.live 已弃用，因为 jquery 1.9 使用 .on 代替 1.8

之后的版本

jQuery 函数在 JSFiddle 上有效，但在我的 html 文档中无效

jQuery function works on JSFiddle but doesn't work in my html document

javascript

jquery

html

function

jsfiddle