Question

jQuery版本：1.4.1

我正在尝试编写一个简单的水印类型插件，我想利用实时事件，因为在页面加载过程中我不需要使用它的所有元素，或者可以添加和删除它们DOM。然而，由于某种原因，事件永远不会发生。

以下是无效代码：

; (function($) {

    $.fn.watermark = function(text) {

        return $(this).each(function() {
            $(this).live('focusout', function() {
                if (this.value == "") {
                    this.value = text;
                }

                return false;
            });

            $(this).live('focusin', function() {
                if (this.value == text) {
                    this.value = "";
                }

                return false;
            });
        });
    }

})(jQuery);

我可以在不使用直播活动的情况下使用它。这段代码确实有效：

; (function($) {

    $.fn.watermark = function(text) {

        return $(this).each(function() {
            $(this).focusout(function() {
                if (this.value == "") {
                    this.value = text;
                }

                return false;
            });

            $(this).focusin(function() {
                if (this.value == text) {
                    this.value = "";
                }

                return false;
            });
        });
    }

})(jQuery);

Answer 1

.live()需要一个选择器而不是DOM元素，在你调用它的地方，它只在一个DOM元素上，所以代替这个：

$(this).each(function() {
        $(this).live('focusout', function() {

试试这个（this已经是一个jQuery对象）：

this.live('focusout', function() {

它需要这个因为.live()如何工作，当事件冒泡到document时它检查选择器......如果没有选择器，则无法检查。另外，如果你有一个DOM元素而且事件处理程序仅用于，那么.live()无论如何都没有多大意义：）

Answer 2

看看这里。

Simulating "focus" and "blur" in jQuery .live() method

Answer 3

尝试：

$(document).ready(function(){
  $('input[type=search]').bind('focusin', function(){
    $(this).animate({width: '300px'}, 500);
    $('svg.magnifier').hide();
    $('svg.cancel').show();
  }).bind('focusout', function(){
    $('svg.cancel').hide();
    $('svg.magnifier').show();
    $(this).animate({width: '100px'}, 500);
  });
});

div.box_block {
  position: relative;
}
input[type=search] {
  width: 100px;
  padding: 10px 10px 10px 30px;
}
/* --
  SVG - https://www.iconfinder.com/iconsets/ionicons
----- */
svg {
  position: absolute!important;
  left: 10px;
  transform: translateY(55%);
  top: 0;
}
svg.cancel {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box_block">
  <input type="search" placeholder="Search">
  <svg class="cancel" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
  <svg class="magnifier" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3  c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2  c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2  c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>
</div>

jQuery focusin和focusout直播活动没有解雇

3 个答案: