Question

预先注意：我已经查看并查看了SO问题中的解决方案：Jquery checkbox change and click event。 SO上的其他人更多地阅读价值而不是事件没有解决的问题。

我承认我是JQuery的新手。

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

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

我已拉出相关代码。我在线阅读了几个例子，因此尝试使用

＆lt; span id =＆＃34; foo＆＃34;＆gt;＆lt; input＆gt;＆lt; / span＆gt;
＆lt; input class =＆＃39; romanCheck＆＃39; ID =＆＃39; romanCheck＆＃39;类型=＆＃39;复选框＆＃39;＆GT;

都没有调用警报。 JSFiddle有点关于PHP的问题。对于复选框，我已尝试.change（）和.click（）

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

Safari：7.0.3（9537.75.14）
Chrome：33.0.1750.152
Firefox：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>

Answer 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 });

Answer 2

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

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 });

Answer 3

span.iterationField不存在，而是跨越＃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库

Answer 4

经过大量的努力之后，似乎最有效的答案如下：

    $(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>";

JQuery忽略click（）和change（）

4 个答案: