CODEWITHSUNDEEP
javascriptjqueryhtmlcssclone
Vicky Parab
Vicky Parab

Reputation: 131

Jquery update text on selected div

I'm trying to update text inside clicked element, but both the div gets updated on the same time. trying to play around the same code without including Id or further class.

Trying to find the solution since morning.

Here is the the live fiddle to playground: https://jsfiddle.net/vinayak5192/63ujzwwn/2/

$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
    var big_parent = $(this);

    //edit text
    if (big_parent.attr("data-type") == 'text') {

      $("#sim-edit-text .text").val(big_parent.text());
      $("#sim-edit-text").fadeIn(500);
      $("#sim-edit-text .sim-edit-box").slideDown(500);

      $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
        big_parent.text($("#sim-edit-text .text").val());
      });
    }
  });


}, function() {
  $(this).removeClass('hover_edit_me');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>

<hr/>

<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
  <div class="sim-edit-box">
    <div class="sim-edit-box-content">
      <small>Edit Text: </small>
      <div class="sim-edit-box-content-field">
        <textarea class="sim-edit-box-content-field-textarea text"></textarea>
      </div>
    </div>
    <div class="sim-edit-box-buttons">
      <div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
      <div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 166

Answers (3)

Nirali
Nirali

Reputation: 1786

Check below snippet

You can also solve by below way. Instead of declaring a variable every time use variable directly $big_parent = $(this);

$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
    $big_parent = $(this);

    //edit text
    if ($big_parent.attr("data-type") == 'text') {

      $("#sim-edit-text .text").val($big_parent.text());
      $("#sim-edit-text").fadeIn(500);
      $("#sim-edit-text .sim-edit-box").slideDown(500);

      $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
        $big_parent.text($("#sim-edit-text .text").val());
      });
    }
  });


}, function() {
  $(this).removeClass('hover_edit_me');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>

<hr/>

<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
  <div class="sim-edit-box">
    <div class="sim-edit-box-content">
      <small>Edit Text: </small>
      <div class="sim-edit-box-content-field">
        <textarea class="sim-edit-box-content-field-textarea text"></textarea>
      </div>
    </div>
    <div class="sim-edit-box-buttons">
      <div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
      <div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>

Upvotes: 0

Scoots
Scoots

Reputation: 3102

Your problem is being caused by the fact that inside $(".hover_edit_me").on('click', function(e) { you are defining another click handler for $("#sim-edit-text .sim-edit-box-buttons-save"). - every time you click on a element to edit, you are making it so that hitting save updates that element, but it's still going to update other elements you've clicked on too.

There are a couple ways of solving this. One is to move the declaration of big_parent and to move the click event for ...-save to outside the .hover_edit_me click event.

The other is to remove the events on the save element before applying the new one by adding .off(), like so:

$("#sim-edit-text .sim-edit-box-buttons-save").off().click(function() {

Upvotes: 2

Muhammad Usman
Muhammad Usman

Reputation: 10148

Define big_parent out of all the function body and you're done.

var big_parent
$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
      big_parent = $(this);

    //edit text
    if (big_parent.attr("data-type") == 'text') {

      $("#sim-edit-text .text").val(big_parent.text());
      $("#sim-edit-text").fadeIn(500);
      $("#sim-edit-text .sim-edit-box").slideDown(500);

      $("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
        big_parent.text($("#sim-edit-text .text").val());
      });
    }
  });


}, function() {
  $(this).removeClass('hover_edit_me');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>

<hr/>

<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
  <div class="sim-edit-box">
    <div class="sim-edit-box-content">
      <small>Edit Text: </small>
      <div class="sim-edit-box-content-field">
        <textarea class="sim-edit-box-content-field-textarea text"></textarea>
      </div>
    </div>
    <div class="sim-edit-box-buttons">
      <div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
      <div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>

here is snippet

Upvotes: 3

Related Questions