一次只允许切换一个元素

Question

我已经创建了一些电影片名的列表。如果用户有权限，他可以通过按 crtl + 左键单击 他想要更改的标题来编辑这些名称。

P 标签变为输入并在回车键上 ajax 请求以新名称发送到后端。那很好用。但是我没有任何方法可以取消名称编辑或阻止用户在一个已经被编辑的标题上点击另一个标题

我试图做的是检查用户是否点击了其他不是输入的东西，如果是，则将输入改回 P 标签，但这不起作用。

$(document).ready(function() {
  $('.nameChanger').on("mousedown", function(e) {
    e.preventDefault();
    if (e.ctrlKey) {
      var $textElement = $(this);
      var $input = $('<input class="inputElementNew" />').val($textElement.text());

      var $textValue = $textElement.text()
      $textElement.replaceWith($input);

      if ($(e.target).closest('.inputElementNew').length === 0) {
        //var $p = $('<p class="nameChanger" />').text($textElement.text());
        console.log("back to oryginal")
        //$input.replaceWith($p)
      }


      //used so you can click once on link element and new page won't open
      $('.doubleLink').click(function() {
        return false;
      }).dblclick(function() {
        window.location = this.href;
        return false;
      });


      var send = function() {
        var $p = $('<p class="nameChanger" />').text($input.val());
        $input.replaceWith($p);
        //ajax request is here
      };
      $input.keypress(function(e) {
        if (e.keyCode == 13) {
          console.log("changed")
          $input.one('focusout', send)

        }
      });

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div title="Press CRTL + left click to change name and press enter">
  <a class="doubleLink" href="#"><b>
      <p class="nameChanger" data-title="item-1">Movie title 1</p>
    </b></a>
</div>


<div title="Press CRTL + left click to change name and press enter">
  <a class="doubleLink" href="#"><b>
      <p class="nameChanger" data-title="item-2">Movie title 2</p>
    </b></a>
</div>

Answer 1

$(document).ready(function () {
    function mouseDown() {
        $('.nameChanger').on("mousedown", function (e) {
            e.preventDefault();
            if (e.ctrlKey) {
                var $textElement = $(this);
                var $input = $('<input class="inputElementNew" />').val($textElement.text());

                var $textValue = $textElement.text()
                $textElement.replaceWith($input);
                $input.focus();

                if ($(e.target).closest('.inputElementNew').length === 0) {
                    //var $p = $('<p class="nameChanger" />').text($textElement.text());
                    console.log("back to oryginal")
                    //$input.replaceWith($p)
                }


                //used so you can click once on link element and new page won't open
                $('.doubleLink').click(function () {
                    return false;
                }).dblclick(function () {
                    window.location = this.href;
                    return false;
                });


                var send = function () {
                    var $p = $('<p class="nameChanger" />').text($input.val());
                    $input.replaceWith($p);
                    //ajax request is here
                    mouseDown();
                };
                $(".inputElementNew").on("focusout", function () {
                    send();
                })
                $input.keypress(function (e) {
                    if (e.keyCode == 13) {
                        send();
                    }
                });

            }
        });
    }

    mouseDown();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div title="Press CRTL + left click to change name and press enter">
  <a class="doubleLink" href="#"><b>
      <p class="nameChanger" data-title="item-1">Movie title 1</p>
    </b></a>
</div>


<div title="Press CRTL + left click to change name and press enter">
  <a class="doubleLink" href="#"><b>
      <p class="nameChanger" data-title="item-2">Movie title 2</p>
    </b></a>
</div>

Answer 2

您的 p-elements 元素仅在 document.ready() 上获得一次 Event-bindung。新创建的对象没有 event-listener.

最佳做法是同时创建输入和 p-elements 并使用 css 显示其中之一并使用 jquery 更新。

如果您想使用您的方法，您必须再次将 eventListener“.on”添加到 P 元素。

Answer 3

请查找更新后的 jsfiddle，希望此解决方案对您有所帮助。

$(document).ready(function() {
    $(document).on("mousedown",".nameChanger", function(e) {
        e.preventDefault();
        if (e.ctrlKey) {
                    var data_title = $(this).attr("data-title");
                    var data_val = $(this).html();

        $(".inputElementNew").each(function(i,e){
        $(this).replaceWith('<p class="nameChanger" data-title="'+data_title+'">'+$(this).val()+'</p>');
        })
            var $textElement = $(this);

            var $input = $('<input class="inputElementNew"  data-title="'+data_title+'"/>').val($textElement.text());

            var $textValue = $textElement.text()
            $textElement.replaceWith($input);
            if ($(e.target).closest('.inputElementNew').length === 0) {
                //var $p = $('<p class="nameChanger" />').text($textElement.text());
                console.log("back to oryginal")
                //$input.replaceWith($p)
              $input.focus();
            }
                        
            
            //used so you can click once on link element and new page won't open
             $('.doubleLink').click(function() {
                return false;
            }).dblclick(function() {
                window.location = this.href;
                return false;
            });


            var send = function() {
                var $p = $('<p class="nameChanger" />').text($input.val());
                $input.replaceWith($p);
                    //ajax request is here
            };
            $input.keypress(function(e) {
            if (e.keyCode == 13) {
                console.log("changed")
                $input.one('focusout', send)

            }
            });
            
             $(".inputElementNew").on("focusout",function(){
              $(this).replaceWith('<p class="nameChanger" data-title="'+data_title+'">'+$(this).val()+'</p>');
        })

        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div title="Press CRTL + left click to change name and press enter">
  <a class="doubleLink" href="#"><b>
      <p class="nameChanger" data-title="item-1">Movie title 1</p>
    </b></a>
</div>


<div title="Press CRTL + left click to change name and press enter">
  <a class="doubleLink" href="#"><b>
      <p class="nameChanger" data-title="item-2">Movie title 2</p>
    </b></a>
</div>

一次只允许切换一个元素

Allow only one element to be toggled at time

javascript

jquery