Текст элемента списка <li>не отображается правильно после того, как отредактирован, нажмите кнопку сохранения из модального всплывающего окна в Javascript - PullRequest
Новая
       12

Текст элемента списка <li>не отображается правильно после того, как отредактирован, нажмите кнопку сохранения из модального всплывающего окна в Javascript

0 голосов
/ 02 декабря 2018

У меня есть вложенный элемент списка <li>, структурированный как показано ниже.Я пытаюсь отредактировать текст каждого элемента из всплывающего модального окна и отразить изменения после того, как я нажму кнопку Save.

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

$(document).ready(function() {

  $('.modal').modal(); // modal

  var child;
  $('body').on('click', '.fa-pencil', function(e) {


    var text = $(this).closest("li").clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text();

    child = $(this).closest("li").children();
    var li_element = $(this).closest('li');
    console.log(li_element);
    var dataActive = $(this).closest('li').attr('data-act');
    var li_icon = li_element.attr('data-icon');

    var modal1 = $('#modal1');
    var modalBody = modal1.find('.modal-content');

    modalBody.find('h4.itemdes').text('');
    modalBody.find('.modalBody').html('');

    var modalHeader = modalBody.find('h4.itemdes').attr('contenteditable', true).text(text);
    dataActive = $(this).closest('li').attr('data-act') == 'Y' ? 'checked="checked"' : '';
    ActiveOpt = '<p><label><input type="checkbox" id="active" class="filled-in" ' + dataActive + ' /><span>Active</span></label></p>';
    IconOpt = '<p><a href="#" class="btn" data-toggle="popover" id="changeIcon"><i class="' + li_icon + '" id="icon_element" aria-hidden="true"></i></a></p>';

    var datahtml = ActiveOpt + IconOpt;
    modalBody.find('.modalBody').html(datahtml);
    // modalBody.find('.modalBody').append(IconOpt);

    $('body').on('click', '.saveChange', function() {
      var textarea = $('.itemdes').text();
      var appendItem = textarea;
      li_element.text('').empty().append(appendItem).append(child);
      // $(this).closest("li").text('').empty().append(appendItem).append(child);
      ActiveOpt = '';
      IconOpt = '';
      // li_element = '';
    });

    // Function to check li data-Acive
    $('body').on('change', '#active', function() {
      li_element.removeAttr('data-act');
      // console.log(li_element.prop('checked'));
      if ($(this).prop('checked')) {
        li_element.attr('data-act', 'Y');
        // li_element.attr('checked','checked');
      } else {
        li_element.attr('data-act', 'N');
        // li_element.removeAttr('checked');
      }



    })

  });
})
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Materialized CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4 style="width: auto; float: left;"><i class="fa fa-pencil-square-o" aria-hidden="true">&nbsp;</i></h4>
    <h4 class="itemdes">Modal Header</h4>
    <div class="modalBody">
      <p>A bunch of text</p>
    </div>
    <a href="#!" class="modal-close waves-effect waves-green btn saveChange right">Save</a>
  </div>
</div>

<ol class="example example2">
  <li data-formdesc="User" data-act="Y" data-icon="fa fa-heart">
    <i class="fa fa-heart"></i>User<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol></ol>
  </li>
  <li data-formdesc="Cash Withdrawal" data-act="Y" data-icon="">
    <i class=""></i>Cash Withdrawal<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol></ol>
  </li>
  <li data-formdesc="Branch1" data-act="Y" data-icon="fa fa-futbol-o">
    <i class="fa fa-futbol-o"></i>Branch1<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol>
      <li data-formdesc="Customer Centre" data-act="Y" data-icon="">
        <i class=""></i>Customer Centre<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
      <li data-formdesc="Customers Detail Listing" data-act="Y" data-icon="">
        <i class=""></i>Customers Detail Listing<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
    </ol>
  </li>
  <li data-formdesc="2 two" data-act="Y" data-icon="fa fa-linkedin">
    <i class="fa fa-linkedin"></i>2 two<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol>
      <li data-formdesc="Cash Withdrawal" data-act="Y" data-icon="">
        <i class=""></i>Cash Withdrawal<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
      <li data-formdesc="Till to Till Transfer" data-act="Y" data-icon="">
        <i class=""></i>Till to Till Transfer<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol>
          <li data-formdesc="Disbursement Voucher" data-act="Y" data-icon="">
            <i class=""></i>Disbursement Voucher<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
            <ol></ol>
          </li>
        </ol>
      </li>
      <li data-formdesc="Income Posting" data-act="Y" data-icon="">
        <i class=""></i>Income Posting<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
    </ol>
  </li>
</ol>

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

Я не знал, что не так с моим JavaScript.Как я могу это исправить?Спасибо

1 Ответ

0 голосов
/ 02 декабря 2018

При каждом щелчке на .fa-карандаше вы снова добавляете прослушиватели событий в .saveChange и #active, используя локальные переменные, такие как li_element, которые ограничены функцией обратного вызова.Это означает, что при втором редактировании элемента выполняются два обратных вызова, но первый по-прежнему использует предыдущее значение для li_element, тем самым устанавливая новое значение и для предыдущего отредактированного элемента.

Вы должны объявить всепрослушиватели событий один раз и переместите все необходимые переменные на тот же уровень, что и var child.

Это должно работать 

$(document).ready(function() {

  $('.modal').modal(); // modal

  var child;
  var li_element;
  $('body').on('click', '.fa-pencil', function(e) {


    var text = $(this).closest("li").clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text();

    child = $(this).closest("li").children();
    li_element = $(this).closest('li');
    console.log(li_element);
    var dataActive = $(this).closest('li').attr('data-act');
    var li_icon = li_element.attr('data-icon');

    var modal1 = $('#modal1');
    var modalBody = modal1.find('.modal-content');

    modalBody.find('h4.itemdes').text('');
    modalBody.find('.modalBody').html('');

    var modalHeader = modalBody.find('h4.itemdes').attr('contenteditable', true).text(text);
    dataActive = $(this).closest('li').attr('data-act') == 'Y' ? 'checked="checked"' : '';
    ActiveOpt = '<p><label><input type="checkbox" id="active" class="filled-in" ' + dataActive + ' /><span>Active</span></label></p>';
    IconOpt = '<p><a href="#" class="btn" data-toggle="popover" id="changeIcon"><i class="' + li_icon + '" id="icon_element" aria-hidden="true"></i></a></p>';

    var datahtml = ActiveOpt + IconOpt;
    modalBody.find('.modalBody').html(datahtml);
    // modalBody.find('.modalBody').append(IconOpt);
  });

  $('body').on('click', '.saveChange', function() {
      var textarea = $('.itemdes').text();
      var appendItem = textarea;
      li_element.text('').empty().append(appendItem).append(child);
      // $(this).closest("li").text('').empty().append(appendItem).append(child);
      ActiveOpt = '';
      IconOpt = '';
      // li_element = '';
    });

    // Function to check li data-Acive
    $('body').on('change', '#active', function() {
      li_element.removeAttr('data-act');
      // console.log(li_element.prop('checked'));
      if ($(this).prop('checked')) {
        li_element.attr('data-act', 'Y');
        // li_element.attr('checked','checked');
      } else {
        li_element.attr('data-act', 'N');
        // li_element.removeAttr('checked');
      }

  })
})
...