Текст обновления jquery для выбранного div

Я пытаюсь обновить текст внутри нажатого элемента, но оба div обновляются одновременно. пытаясь воспроизвести тот же код без включения идентификатора или другого класса.

С утра пытаюсь найти решение.

Вот живая рабочий пример для детской площадки: 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>

Вы В самом деле не должны связывать обработчик кликов для каждого отдельного события наведения мыши. Это просто плохой код, потому что прослушиватели событий быстро складываются, когда пользователь появляется и исчезает. В общем, привязка обработчиков событий в обработчиках событий - не лучшая идея, и вам следует пересмотреть способ их привязки.

— 02.05.2018 11:40

@Terry, как можно реализовать то же самое? любые предложения для чистого кода

— 02.05.2018 11:57

Обработчики событий щелчка можно определить вне контекста события наведения.

— 02.05.2018 11:58

Хорошо, теперь я перехожу от события наведения к событию щелчка, это работает с решением @george. это странно, просто определение var вне fun заставляет его работать.

— 02.05.2018 12:00

javascript jquery html css clone

02.05.2018 11:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

113

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Определите big_parent из всего тела функции, и все готово.

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>

вот фрагмент

Можете ли вы объяснить, почему это решает проблему / в чем была проблема?

— 02.05.2018 11:44

Это не совсем правильное решение проблемы. Проблема в том, что каждый раз, когда вы нажимаете на .edit, он добавляет другой обработчик событий к элементу сохранения.

— 02.05.2018 11:45

@George, можете ли вы объяснить, просто определив переменную вне функции, как она работает?

— 02.05.2018 11:46

02.05.2018 11:38

Проверьте нижеприведенный фрагмент

Вы также можете решить проблему следующим образом. Вместо того, чтобы объявлять переменную каждый раз, используйте переменную напрямую $ 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/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>

Найдите время, чтобы описать, в чем заключаются проблемы и почему это решение помогает. Помните, мы здесь для того, чтобы обучать людей, а не просто сбрасывать им код.

— 02.05.2018 11:57

02.05.2018 11:44

Ваша проблема вызвана тем, что внутри $(".hover_edit_me").on('click', function(e) { вы определяете другой обработчик кликов для $("#sim-edit-text .sim-edit-box-buttons-save"). - каждый раз, когда вы щелкаете элемент, который нужно отредактировать, вы делаете так, что нажатие кнопки «Сохранить» обновляет этот элемент, но при этом обновляются и другие элементы, на которые вы нажали.

Есть несколько способов решить эту проблему. Один из них - переместить объявление big_parent и переместить событие щелчка для ...-save за пределы события щелчка .hover_edit_me.

Другой - удалить события в элементе сохранения перед применением нового, добавив .off(), например:

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

02.05.2018 11:49