Question

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("Text selected ");
  });
  $("button").click(function(){
    $("input").trigger("select");
    //$('input')[0].select();
});
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br/>
<button>Trigger select event</button>
</body>
</html>

上面的代码在chrome中触发选择处理程序3次...这是3个“文本选择”出现..我不知道为什么。如何解决这个问题？顺便说一下，如果我使用评论的方式，仍然会出现两个部分。为什么呢？

Answer 1

这有点令人惊讶。它不仅出现在Chrome中。但也在Safari和Opera中。

解决方案1：

我的建议是return false;。因为在这种情况下select事件处理程序必须返回false。这样我们就可以停止执行更多的select事件处理程序了。但是调用.preventDefault()和.stopPropagation()将无法实现此目的。因为这里没有用于事件冒泡的父子关系。

试试这段代码：

$(document).ready(function () {
            $("input").select(function () {
                $("input").after("Text selected ");
                return false;
            });
            $("button").click(function () {
                $("input").trigger("select");
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>Trigger select event</button>

解决方案2：（根据您的要求）

尝试使用.on()和.off()方法。它会起作用。

$(document).ready(function () {
            $("input").on('select', appendWord);

            $("button").click(function () {
                $("input").trigger('select');
                $("input").off('select');
                setTimeout(function () {
                    $("input").on('select', appendWord);
                }, 300);
            });

            function appendWord() {
                $("input").after("Text selected ");
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>Trigger select event</button>

希望这会对你有所帮助。

Answer 2

这很奇怪，但我用e.preventDefault（）修复了这个;
也许当它选择文本时，它会再次触发事件。

＆＃13;

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("input").on('select', function(e) {
    e.preventDefault();
    $(this).after("Text selected ");
  });
  $("button").click(function(){
    $("input").select();
    //$('input')[0].select();
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br/>
<button>Trigger select event</button>
</body>
</html>

＆＃13;

Answer 3

试试这个：

$(document).ready(function(){
   $("input").on('focus',function(){
      $("input").after("Text selected ");
   });
   $("button").click(function(){
      $("input").trigger("focus");
   });
});

Answer 4

由于你在这里做了两件事，我建议你做一个自定义事件。为了给定元素执行此操作，我添加了一个类（只是为了使其特定于文本输入我也添加了该类型）。（避免按钮输入类型）

调整后的加价：

<input type="text" class="textentry" name="FirstName" value="Hello World" />
<br/>
<button>Trigger select event</button>

调整后的代码：

$(document).ready(function () {
    $("input.textentry[type=text]").on('textselect',function () {
      $("input.textentry[type=text]").select().after("Text selected ");
    });
    $("button").click(function () {
        $("input.textentry[type=text]").trigger("textselect");
    });
});

示例小提琴：http://jsfiddle.net/MarkSchultheiss/gf6rycao/

注意这个的快捷方式只是：

$("button").click(function () {
    $("input.textentry[type=text]").select().after('TextSelected');
});

关于[type=text]的说明我使用了:text而不是querySelectorAll()来允许在库中使用require 'test_helper' # # == Admin namespace # module Admin # # == SettingsController test # class SettingsControllerTest < ActionController::TestCase include Devise::TestHelpers setup :initialize_test # # == Avatar # test 'should be able to upload logo' do upload_dropbox_paperclip_attachment setting = assigns(:setting) assert setting.logo? assert_equal 'bart.png', setting.logo_file_name assert_equal 'image/png', setting.logo_content_type end test 'should be able to destroy logo' do upload_dropbox_paperclip_attachment remove_dropbox_paperclip_attachment end private def initialize_test @setting = settings(:one) @administrator = users(:bob) sign_in @administrator end def upload_dropbox_paperclip_attachment puts '=== Uploading logo to Dropbox' attachment = fixture_file_upload 'images/bart.png', 'image/png' patch :update, id: @setting, setting: { logo: attachment } end def remove_dropbox_paperclip_attachment puts '=== Removing logo from Dropbox' patch :update, id: @setting, setting: { logo: nil, delete_logo: '1' } assert_not assigns(:setting).logo? end end end的性能增益

JQuery触发器函数多次触发

4 个答案: