CODEWITHSUNDEEP
jquery
Thomas-anderson002 anderson002
Thomas-anderson002 anderson002

Reputation: 35

Change text item choice

hello I have many elements so if I click on any one of them I can modify the text but in my code -if I click on any element it go always to change the last one only not element selected -another Question how can I make a copy of each element if I click in icon edit 

$(".edit").click(function() {
  $('.edit').each(function(index) {
    $(".item").get(index).contentEditable = "true";
    $(".item").focus();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div id="hovermodule1" data-id="itemdat-1" class="item disable " draggable="true">
    Lorum1
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div id="hovermodule2" data-id="itemdat-2" class="item disable " draggable="true">
    Lorum2
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div id="hovermodule3" data-id="itemdat-3" class="item " draggable="true">
    Lorum3
  </div>
</div>

Upvotes: 1

Views: 54

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

The problem is because you're looping through all .item elements and calling focus() on them. Only one element at a time can receive focus, so it will the last one you called it on in the loop.

I assume instead that you want to set contenteditable and focus() on the .item related to the .edit element which was clicked. In order to use that you can use jQuery's DOM traversal methods; closest() and next() in this case.

To clone an element you can call clone() on it. I presume you mean to do this on the .cloner element given its context in the UI. Then you can add the clone back in to the DOM where necessary.

Also note that for the .edit and .cloner links to work in the clone itself you need to use delegated event handlers, and you will need to remove the id attributes from the elements you clone, otherwise you will have duplicates which is invalid.

With all that said, try this:

$(document).on('click', '.edit', function() {
  $(this).closest('.blocimage').next('.item').prop('contenteditable', true).focus();
});

$(document).on('click', '.cloner', function() {
  var $clone = $(this).closest('.blocgloab').clone();
  $clone.insertAfter('.blocgloab:last');
});
.item {
  outline: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div data-id="itemdat-1" class="item disable " draggable="true">
    Lorum1
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div data-id="itemdat-2" class="item disable " draggable="true">
    Lorum2
  </div>
</div>
<div class="blocgloab">
  <div class="blocimage">
    <button class="nobutton edit"><img src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/badge_edit-128.png"></button>
    <button class="nobutton cloner"><img src="https://image.flaticon.com/icons/png/128/130/130992.png"></button>
  </div>
  <div data-id="itemdat-3" class="item " draggable="true">
    Lorum3
  </div>
</div>

Upvotes: 2

Related Questions