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

Question

I have a function that adds x px of margin-left to "Karusell" which is a div-box. I also have a function that adds "1" to nextClicked every time we use the first function. When nextClicked is 2, there should not be any margin added when clicked on the first function. This works perfectly fine in JSFiddle, but doesn't work in my HTML document and I don't know why.

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>

here is the JSFiddle: http://jsfiddle.net/vbLjcpx1/11/

As we can see in the JSFiddle link, no margin is being added the second time we use the function, and this should also happen in my HTML document.

`.live()` is removed from v1.9 of jQuery, here you use 3.x (http://api.jquery.com/live/) — Radonirina Maminiaina, May 06 '19 at 11:26
@Krøsh change the live function to on, the live function doesn't exist in newer versions of jquery — madalinivascu, May 06 '19 at 11:28
Change the version of jQuery in the fiddle from 1.8.3 to 3.3.1 as in your "not working" example. What happens? — Andreas, May 06 '19 at 11:28
Thank you guys the problem was the live function. I changed it to on now it works! — Krøsh, May 06 '19 at 11:31

score 1 · Answer 1 · answered May 06 '19 at 11:27

You are using a newer version of jquery where the live() function is depreciated, use the on() function instead

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

score 0 · Accepted Answer · answered May 06 '19 at 11:32

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 is deprecated since jquery 1.9 use .on instead for the versions after 1.8

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

2 Answers2