JQuery 忽略 click() 和 change()答案

【问题标题】：JQuery ignoring click() and change()JQuery 忽略 click() 和 change()
【发布时间】：2014-04-10 02:03:20
【问题描述】：

提前说明：我已经查看并查看并尝试了 SO 问题中的解决方案：Jquery checkbox change and click event。 SO 上的其他人更多地处理读取值而不是事件未触发的问题。

我承认我是 JQuery 的新手。

我正在尝试进行两项更改。一种是文本字段更改，另一种是切换复选框。两者都在一个表格内。这个想法是，如果文本字段发生更改，则完成计算并将返回值写入复选框后的文本中。该复选框可打开和关闭该文本。完成后即可提交表单。

代码（如下所示）也使用 php。

我已经提取了相关代码。我在线阅读了几个示例，因此尝试使用

两个警报都没有被调用。 JSFiddle 对 PHP 有点不满。对于复选框，我尝试了 .change() 和 .click()

我测试过的浏览器都是Mac（我的开发环境）

Safari：7.0.3 (9537.75.14)
铬：33.0.1750.152
火狐：28.0

我已附上相关代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Not Working.php</title>
    <link rel="stylesheet" href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css">
    <script src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
    <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<script>
function romanize (num) {
    return "(" + "roman for " + ")";
}

$(document).ready(function(){

    $(".romanCheck").live("change",function() {
        alert("#romanCheck.click has been hit");
        var romanValue = "";
        var roman = $("#romanCheck").is(':checked');
        if ( roman ) {
            var itValue = $(this).val();
            romanValue="(" + romanize(itValue) +")";
        }
        $("#romanDisplay").text(romanValue);
    });

    $("span.iterationField input").live("change",function() {
        alert("#iteration.change has been hit");
        var romanValue = "";
        var roman = $("#romanCheck").is(':checked');
        if ( roman ) {
            var itValue = $(this).val();
            romanValue="(" + romanize(itValue) +")";
        }
        $("#romanDisplay").text(romanValue);
    });
});

</script>
<form action='EventValidateProcess.php' method='post'>
<?php
    $doesShow = 1;
    $isRoman = 1;
    $iteration - 13;
    print "<table>\n";
    print "<tr>\n\t<td>Iteration</td>\n\t";
    print "<td><span id='iterationField'><input type='text' name='iteration' value='" . $iteration . "'></span></td>\n\t";
    print "<td><input type='checkbox' name='doesShow' value='1'";
    if ($doesShow == 1) {
        print " checked";
    }
    print "> visible | ";

    print "\n<input class='romanCheck' id='romanCheck' type='checkbox' name='isRoman' value='1'";
    if ($isRoman == 1) {
        print " checked";
    }
    print "> uses Roman numerals\n";
    print "<span id='romanDisplay'>(XX)</span></td>\n</tr>\n";
?>
</table>
<button type='submit' name='process' value='update'>Update</button><br/>
</form>
</body>

【问题讨论】：

介意JSFiddle？
我在使用 JSFiddle 时运气不佳，第一次尝试破坏了 HTMP+PHP

标签： php jquery forms checkbox event-handling

【解决方案1】：

.live() 已弃用：1.7，已删除：1.9

像使用jquery-1.10.2一样使用.on()

语法

$( elements ).on( events, selector, data, handler );

$(document).on("change", "span.iterationField input" ,function() { //code here });
$(document).on("change", ".romanCheck" ,function() { //code here });

【讨论】：

【解决方案2】：

span.iterationField 不存在，取而代之的是 span#iterationField，并使用：

$(document).ready(function(){
    $("input.romanCheck").on("change",function() {
        alert("#romanCheck.click has been hit");
        var romanValue = "";
        var roman = $("#romanCheck").is(':checked');
        if ( roman ) {
            var itValue = $(this).val();
            romanValue="(" + romanize(itValue) +")";
        }
        $("#romanDisplay").text(romanValue);
    });
});

注意：请确保已导入 jquery 库

【讨论】：

【解决方案3】：

经过大量优化后，似乎最有效的答案如下：

    $(document).change("input.romanCheck", function() {
        var romanValue = "";
        var roman = $("#romanCheck").is(':checked');
        if ( roman ) {
            var itValue = $("#iterationField").val();
            romanValue="(" + romanize(itValue) +")";
        }
        $("#romanDisplay").text(romanValue);
    });

    $(document).change("input.iterationField", function() {
        var romanValue = "";
        var roman = $("#romanCheck").is(':checked');
        if ( roman ) {
            var itValue = $("#iterationField").val();
            romanValue="(" + romanize(itValue) +")";
        }
        $("#romanDisplay").text(romanValue);
    });

使用：

    print 
    "<input id='iterationField' type='text' name='iteration' value='";
    print $iteration . "'/>";

    print 
    "<input id='romanCheck' type='checkbox' name='isRoman' value='1'";
    if ($isRoman == 1) {
        print " checked";
    }
    print ">";

    print "<span id='romanDisplay'>";
    if ($isRoman == 1) {
        print "(" . $romanIteration . ")";
    }
    print "</span>";

【讨论】：

【解决方案4】：

我不确定你的问题是什么，但试试这个。

function romanclick(){
//if event fire twice   use namespace  at 1. and 2.   and put   $(document).off('namespace') here


//your code romanclick
$('span.iterationField input').click(function(){
textchange();// call it again



});

}



function textchange(){
//if event fire twice   use namespace  at 1. and 2.   and put  $(document).off('namespace') here


//change text code

$('.romancheck').click(function(){
romanclick();// call it again



});

} ;

1.$(document).on("change", "span.iterationField input" ,function() {  //call your     function here });
2.$(document).on("change", ".romanCheck" ,function() { //call your function here });

【讨论】：