Problem with JQuery click event

Navigation
2

I have this code: 

var elementos = $("#caja1").children("a.list-group-item");
var elementos2 = $("#caja2").children("a.list-group-item");

function asignarClick(elementos) {
  for (var i = 0; i < elementos.length; i++) {
    $(elementos[i]).on("click", function() {
      if (!$(this).hasClass("active")) {
        for (var j = 0; j < elementos.length; j++) {
          if ($(elementos[j]).hasClass("active")) {
            $(elementos[j]).removeClass("active");
          }
        }
        $(this).addClass("active");
        if ($(this).parent().attr("id") == "caja1") {

        }
      }
    });
  }
}

$(function() {
  asignarClick(elementos);
  asignarClick(elementos2);

  $("#arrowUp").css("cursor", "pointer");
  $("#arrowDown").css("cursor", "pointer");

  $("#arrowUp").on("click", function() {
    alert("Flecha arriba");
  });

  $("#arrowDown").on("click", function() {
    var elementos = $("#caja1").children("a.list-group-item");
    for (var i = 0; i < elementos.length; i++) {
      if ($(elementos[i]).hasClass("active")) {
        $(elementos[i]).removeClass("active");
        $(elementos[i]).remove();
        $("#caja1").children().first().addClass("active");
        $("#caja2").append(elementos[i]);
        elementos = $("#caja1").children("a.list-group-item");
        asignarClick(elementos);
        elementos2 = $("#caja2").children("a.list-group-item");
        asignarClick(elementos2);
      }
    }
  });
});
a.active {
  background-color: yellow;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3">

  <div class="row" style="margin-bottom: 2em">
    <div class="col-md-12">
      <div class="list-group" id="caja1">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-bottom: 3em">
    <div class="col-md-12" style="text-align: center">
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i>
      </div>
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown"></i>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" id="caja2">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

</div>
<div class="col-md-1"></div>

In a box, if I click an element, it puts it on as active and I color it, likewise it removes the active from the element that was. What I want is that when I click on the arrow to go down I lower the selected item in box1 to box2 and work as in the beginning.

    
asked by G3l0 25.05.2017 в 15:35
source

2 answers

1

The problem is that you have not eliminated the event click previous of the element and since it only knows the first elements that were no longer recognized, you can do 2 things:

  • Use the .unbind(); method to cancel all events that have
  • Use the asignarClick function in a more generic way 

    • var elementos = $("#caja1").children("a.list-group-item");
var elementos2 = $("#caja2").children("a.list-group-item");

function asignarClick(elementos) {
  for (var i = 0; i < elementos.length; i++) {
    $(elementos[i]).unbind();
    $(elementos[i]).on("click", function() {
      if (!$(this).hasClass("active")) {
        for (var j = 0; j < elementos.length; j++) {
          if ($(elementos[j]).hasClass("active")) {
            $(elementos[j]).removeClass("active");
          }
        }
        $(this).addClass("active");
        if ($(this).parent().attr("id") == "caja1") {

        }
      }
    });
  }
}

$(function(){
    asignarClick(elementos);
    asignarClick(elementos2);

    $("#arrowUp").css("cursor","pointer");
    $("#arrowDown").css("cursor","pointer");

    $("#arrowUp").on("click",function(){
        alert("Flecha arriba");
    });

    $("#arrowDown").on("click",function(){
        var elementos = $("#caja1").children("a.list-group-item");
        for(var i = 0; i < elementos.length; i++){
            if($(elementos[i]).hasClass("active")){
                $(elementos[i]).removeClass("active");
                $(elementos[i]).remove();
                $("#caja1").children().first().addClass("active");
                $("#caja2").append(elementos[i]);
                elementos = $("#caja1").children("a.list-group-item");
                asignarClick(elementos);
                elementos2 = $("#caja2").children("a.list-group-item");
                asignarClick(elementos2);
            }    
        }
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-3">

  <div class="row" style="margin-bottom: 2em">
    <div class="col-md-12">
      <div class="list-group" id="caja1">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-bottom: 3em">
    <div class="col-md-12" style="text-align: center">
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp">up</i>
      </div>
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown">down</i>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" id="caja2">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>
        
    answered by 25.05.2017 / 16:23
    source
    4

    Too much code.

    Following the jQuery slogan of write less, do more; -)

    The two document.on could be left in one, but that will be clearer.

    If you have any questions with the code, please let us know. 

    $(function() {

  // Enlazamos eventos para las cajas. Esto es un evento de tipo live, es decir
  // se ejecuta a nivel de document para los elementos que corresponda a la
  // selección indicada. Da igual que se quiten o se pongan elementos.
  $(document).on("click", "div#caja1 a", function() {
    // Le quitamos a todos la clase active
    $('div#caja1 a').removeClass('active');
    // Se la añadimos a quien nos ha invocado
    $(this).addClass("active");
  });

  $(document).on("click", "div#caja2 a", function() {
    $('div#caja2 a').removeClass('active');
    $(this).addClass("active");
  });

  $("#arrowUp").on("click", function() {
    // Elemento con la clase active
    var obj = $("#caja2 a.active");
    // Control por si no existiera ninguno
    if ( obj.length ) {
      obj.removeClass('active');
      $('#caja1').append(obj);
      $("#caja2").children().first().addClass("active");
    }
  });
  
  $("#arrowDown").on("click", function() {
    var obj = $("#caja1 a.active");
    if ( obj.length ) {
      obj.removeClass('active');
      $('#caja2').append(obj);
      $("#caja1").children().first().addClass("active");
    }
  });

});
    a.active {
  background-color: yellow;
}

#arrowUp,
#arrowDown {
  cursor: pointer;
}
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3">

  <div class="row" style="margin-bottom: 2em">
    <div class="col-md-12">
      <div class="list-group" id="caja1">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-bottom: 3em">
    <div class="col-md-12" style="text-align: center">
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i>
      </div>
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown"></i>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" id="caja2">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

</div>
<div class="col-md-1"></div>
        
    answered by 25.05.2017 в 16:23
    Warning: deprecated conversion from string constant Delete occurrences in a text