Question

在我的页面的某个地方，我有一个按钮，单击该按钮可更改另一个输入的值。但是，我无法控制定义click事件的代码（在客户端的CDN上），我也懒得看。我只是想在我的输入值通过代码改变时捕获事件。这是一个例子：
HTML

<input type="text" id="myinput" />
<input type="button" id="theonechanging" value="Click Me" />
<br />
<p id="message"></p>

JS

var i = 0;
$("#theonechanging").click(function(e) {
    // YOU CAN NOT CHANGE THIS FUNCTION
    $("#myinput").val("changed via button " + i++);
});
$("#myinput").on("input change bind",function(e) {
    $("#message").text("changed " + i++);
});

这是一个可以测试情况的小提琴：http://jsfiddle.net/fourat05/t9x6uhoh/

感谢您的帮助！

Answer 1

这是一种令人难以置信的hacky方式。

您所做的是将jQuery.fn.val函数替换为您自己的实现，并从新实现中调用旧实现。这种技术是一种Monkey patching。

实施如下：

var i = 0;
$("#theonechanging").click(function(e) {
    // YOU CAN NOT CHANGE THIS FUNCTION
    $("#myinput").val("changed via button " + ++i);
});

var handleChanges = function(){
    $("#message").text("changed " + i);
}

var oldval = jQuery.fn.val;
jQuery.fn.val = function(){
    oldval.apply(this,arguments);
    if(this.attr('id') === 'myinput'){ //and possibly add a check for changes
        handleChanges();
    }
}

$("#myinput").on("input change bind",function(e) {
    i++;
    handleChanges();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="myinput" />
<input type="button" id="theonechanging" value="Click Me" />
<br />
<p id="message"></p>

但是，我强烈建议不要使用它，因为：

这会改变广泛使用的库的行为，从而为开发人员为同一页面生成代码创建可能的陷阱
在多个元素上检测多个事件会很快变得复杂。

在实施之前请先了解此方法的副作用。

Answer 2

直接在DOM中更改的值不会触发这些事件，但由于您有一个被调用的操作来更改值，因此您可以触发输入更改事件。

$("#theonechanging").on("click", function(e) {
    $("#myinput").trigger("change");
});

fiddle

Answer 3

使用触发器

var i = 0;
$("#theonechanging").click(function(e) {
   // YOU CAN NOT CHANGE THIS FUNCTION
   $("#myinput").val("changed via button " + i++);
});
$("#theonechanging").on("click", function(e) {
    $("#myinput").trigger("change");
});
$("#myinput").on("input change bind",function(e) {
    $("#message").text($("#myinput").val());
});

Fiddle

Answer 4

我认为如果不改变BUTTON的脚本是不可能的。

当用户点击“按钮”时，您应该触发另一个功能来捕捉“输入”中的更改。

如果您不想更改按钮＆＃39;脚本，您可以尝试类似下面的代码，寻找正确的事件组合：

（查看此处的事件列表：http://www.w3schools.com/tags/ref_eventattributes.asp）

<html>
<body>
<input type="text" id="myinput" onchange="change_Message('onchange')" 
                                onclick="change_Message('onclick')" 
                                oninput="change_Message('oninput')" 
                                onkeypress="change_Message('onkeypress')"/>

<input type="button" id="theonechanging" value="Click Me" onclick="change_Input()"/>
<br />
<p id="message"></p>

<script>

var input_value = document.getElementById('myinput').value; // as global variable

function Test_if_Change() 
{ 
    if ( document.getElementById('myinput').value != input_value ) 
    { 
        change_Message('Test_if_Change'); 
    } 
}

setInterval(Test_if_Changed, 10);

function change_Input() { document.getElementById('myinput').value = 'input changed by button'; }

function change_Message(event) { document.getElementById('message').innerHTML = 'message changed by '+event+' to: ' + document.getElementById('myinput').value; }

</script>

</body>
</html>

检测通过代码对输入所做的更改

4 个答案: