JQuery ignoring click() and change()

StackOverflow https://stackoverflow.com/questions/22977366

Question

Advance note: I have already looked at and looked at and tried the solutions in the SO question: Jquery checkbox change and click event. Others on SO deal more with reading the values rather than the issue that the event is not firing.

I will admit that I am a relative newbie to JQuery.

I am trying to make two changes. One when a text field changes and one when a checkbox is toggled. Both are within a form. The idea is that if the text field changes a computation is done and the return value is written into the text after the checkbox. The checkbox toggles that text on and off. Once finished the form can be submitted.

the code (as seen below) also uses php.

I've pulled the relevant code. I read several examples on line so there is are attempts using

  • <span id="foo"><input></span>
  • <input class='romanCheck' id='romanCheck' type='checkbox'>

Neither alert is being called. JSFiddle kinda barfed on the PHP. For the checkbox I've tried both .change() and .click()

The browsers I've tested on are all Mac (my dev environ)

  • Safari: 7.0.3 (9537.75.14)
  • Chrome: 33.0.1750.152
  • Firefox: 28.0

I've attached the relevant code.

<!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>
Was it helpful?

Solution 3

After a lot of finessing it seemed the answer that worked best was the following:

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

Using:

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

OTHER TIPS

.live() deprecated: 1.7, removed: 1.9

Use .on() as you are using jquery-1.10.2

Syntax

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

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

span.iterationField is not exist, instead span#iterationField, and just use:

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

Note: make sure jquery library in imported

Im not sure what is your problem but try this.

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 });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top