Почему щелчок не работает, когда размытие применяется к div - PullRequest
Новая
       1

Почему щелчок не работает, когда размытие применяется к div

1 голос
/ 19 января 2020

У меня проблема с click, она не работает для blur Скрыть для сохранения.

ниже функция никогда не срабатывает. 

   $('.save-btn').on('click',function(){
         alert('you clicked me !!');
    });

, так как она будет скрыта перед щелчком с blur. как я могу справиться с этим.

Вопрос: Я хочу сохранить существующую функциональность, .save-btn должен работать.

Шаги для воспроизведения:

  1. double click на элементах появится кнопка сохранения

  2. теперь нажмите кнопку сохранения, заметьте, alert не придет

вот мой код: 

$(function(){
     $('.save-btn').hide();
     $('.item-wrapper').on('dblclick',function(){
         $('.item-name').removeAttr('contenteditable');
         $(this).find('.item-name').attr('contenteditable',true);
          $('.save-btn').hide();
         $(this).find('.save-btn').show();
     });

     $('.item-name').on('blur',function(){
           $('.save-btn').hide();
     });
     
    $('.save-btn').on('click',function(){
         console.log('saved button clicked');
         alert('saved button clicked !!');
    });
     
});
div#container {
              width: 409px;
        }
        div#container ul{
            list-style: none;
            line-height: 48px;
        }

        div#container ul li {
            display: flex;
            justify-content: space-between;
        }

        li.item-wrapper:hover {
           background: #e2dada;
        }
        .save-btn {
            width: 40px;
            height: 40px;
            background: #296b73;
            text-align: center;
            border-radius: 50%;
            line-height: 38px;
            color: #eaeaed;
            font-size: 13px;
            border: 2px solid #d8d8d8;
            cursor: pointer;
       }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <ul>
            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 1</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 2</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 3</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 4</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 5</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>
        </ul>
    </div>

Примечание: я не хочу использовать какое-либо время, например .hide(3000)

Ответы [ 4 ]

0 голосов
/ 19 января 2020

Возможно, это не лучшее решение, но добавление события размытия через документ даст результаты, которые вы ищете 

$(document).on("blur",".item-name",function(){
   $(".save-btn").hide();
 });


 $(function() {
      $(".save-btn").hide();
      $(".item-wrapper").on("dblclick", function() {
        $(".item-name").removeAttr("contenteditable");
        $(this).find(".item-name").attr("contenteditable", true);
        $(this).find(".item-name").focus();
        $(".save-btn").hide();
        $(this).find(".save-btn").show();
      });
      $(document).on("blur",".item-name",function(){
         $(".save-btn").hide();
      });

      $(".save-btn").on("click", function() {
        console.log("saved button clicked");
        alert("saved button clicked !!");
      });
    });
div#container {
      width: 409px;
    }
    div#container ul {
      list-style: none;
      line-height: 48px;
    }

    div#container ul li {
      display: flex;
      justify-content: space-between;
    }

    li.item-wrapper:hover {
      background: #e2dada;
    }
    .save-btn {
      width: 40px;
      height: 40px;
      background: #296b73;
      text-align: center;
      border-radius: 50%;
      line-height: 38px;
      color: #eaeaed;
      font-size: 13px;
      border: 2px solid #d8d8d8;
      cursor: pointer;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <ul>
      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 1
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 2
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 3
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 4
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 5
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>
    </ul>
  </div>
0 голосов
/ 19 января 2020

Как я уже сказал, он работает здесь, попробуйте перезагрузить браузер или попробуйте другой браузер.

enter image description here

0 голосов
/ 19 января 2020

В вашем коде вы скрываете кнопку save на размытии, когда вы нажимаете кнопку сохранения, сначала запускается событие размытия, и оно скрывает кнопку save, поэтому технически после этого вы не нажимаете на * 1003. * кнопка

Чтобы это работало, скрывайте кнопку сохранения после 100 или около того, с этим вы получите возможность нажать на кнопку сохранения.

Или не скрывайте save кнопка blur, используйте опцию закрытия. 

 $(function() {
      $(".save-btn").hide();
      $(".item-wrapper").on("dblclick", function() {
        $(".item-name").removeAttr("contenteditable");
        $(this).find(".item-name").attr("contenteditable", true);
        $(this).find(".item-name").focus();
        $(".save-btn").hide();
        $(this).find(".save-btn").show();
      });

      $(".item-name").on("blur", function(event) {
        // $(".save-btn").hide();
       
        
      });

      $(".save-btn").on("click", function() {
        console.log("saved button clicked");
        alert("saved button clicked !!");
        $(".save-btn").hide();
      });
    });
div#container {
      width: 409px;
    }
    div#container ul {
      list-style: none;
      line-height: 48px;
    }

    div#container ul li {
      display: flex;
      justify-content: space-between;
    }

    li.item-wrapper:hover {
      background: #e2dada;
    }
    .save-btn {
      width: 40px;
      height: 40px;
      background: #296b73;
      text-align: center;
      border-radius: 50%;
      line-height: 38px;
      color: #eaeaed;
      font-size: 13px;
      border: 2px solid #d8d8d8;
      cursor: pointer;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <ul>
      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 1
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 2
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 3
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 4
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 5
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>
    </ul>
  </div>
0 голосов
/ 19 января 2020

может, это браузер, который вы используете, протестированный на firefox & chrome, работает нормально, вы используете MS inte rnet explorer прямо сейчас? это не работает в IE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...