javascript - Manually fire event in Jquery - Stack Overflow

admin管理员组

文章数量:1405578

I am dynamically creating a list of input boxes in JQuery and have an event to notify me when they are checked.

$("#myDiv").on("change",  "input[type='checkbox']" , function(){
   if(this.checked){
     alert("HERE");
     //...
   }else{
    alert("THERE");
    //...
   }
});

When the page loads and all the checkboxes show - I can have this enter by checking/unchecking. The problem is that I want a few of these to be checked initially depending on the results of my backend logic. So I want to enter this function after the initial load.

I looked at .trigger() and .click() however, neither seem to do the trick.

Is there another avenue I could take to enter this callback?

I am dynamically creating a list of input boxes in JQuery and have an event to notify me when they are checked.

$("#myDiv").on("change",  "input[type='checkbox']" , function(){
   if(this.checked){
     alert("HERE");
     //...
   }else{
    alert("THERE");
    //...
   }
});

When the page loads and all the checkboxes show - I can have this enter by checking/unchecking. The problem is that I want a few of these to be checked initially depending on the results of my backend logic. So I want to enter this function after the initial load.

I looked at .trigger() and .click() however, neither seem to do the trick.

Is there another avenue I could take to enter this callback?

• javascript
• jquery

Share Improve this question Follow edited Jul 23, 2012 at 18:51 gen_Eric 227k4242 gold badges303303 silver badges342342 bronze badges asked Jul 23, 2012 at 18:33 ist_lionist_lion 3,21999 gold badges4444 silver badges7777 bronze badges 2

• I'm not sure what do answer. May you create a jsFiddle? – davidbuzatto Commented Jul 23, 2012 at 18:35
• 3 since you are attaching to the change event, have you tried .change()? – MrOBrian Commented Jul 23, 2012 at 18:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

If you want to show checked on a checkbox, just set checked property to checked

<input type='checkbox' checked='checked' />

If you want to fire change(); event,

$('<your_checkbox>').change(); 

or

$('<you_checkbox>').trigger('change');

In this case you can create a named function instead of using an anonymous one and call it whenever you need.

var myFunction = function(){
   if(this.checked){
     alert("HERE");
     //...
   }else{
    alert("THERE");
    //...
   }
}

$("#myDiv").on("change", "input[type='checkbox']", myFunction );

// triggering the function manually:
$("#myDiv input[type='checkbox']").each( myFunction );

your code is triggered when myDiv is changing, and you pass a list of checkbox. here 'this' is the mydiv. why not using:

$('input:checkbox').each(function(){// Now this is referring your checkbox});

Define your function separately by name and then call it after the page has loaded for each item that has been checked off.

function onChange(this) {
    if(this.checked){
        alert("HERE");
        //...
    }else{
        alert("THERE");
        //...
    }
}

Your code that monitors checkbox changes would bee:

$("#myDiv").on("change",  "input[type='checkbox']" , function() {
    onChange(this);
});

Since I don't know what the code looks like, I've written some code to print check boxes and define which ones are to be selected by default. It is PHP, but the concept should work for any server side language.

<select>
<?php
$items = array(
    'value1' => 'text1',
    'value2' => 'text2',
    'value3' => 'text3'
);

$selected = array(
    'value1' => true,
    'value3' => true
);

foreach ($items as $value => $text) {
    $selectedAttr = isset($selected[$value]) && $selected[$value]) ?
        " selected='selected'" : '';
    echo "<option value='$value'$selectedAttr>$text</option>";
}
?>
</select>

You'll need to print javascript that runs the function that you want to have executed for each selected option. For the checkbox example that I used, the end result that you'd want is:

$().ready(function() {
    var defaultSelected = [ "[option name='value1']" , "[option name='value3']" ];

    for (var i=0; i < defaultSelected.length; i++) {
        $(defaultSelected[i]).each(onChange);
    }
});

You'll need to generate the javascript on the server side:

<?php

// $selected was defined in the previous code section

// Create selectors that will select each checkbox option
$selectors = array();
foreach ($selected as $s) {
    array_push($selectors, "[option name='$s']");
}

// Produces string: [ "[option name='value1']" , "[option name='value3']" ]
$jsSelectorArray = '[ "' . implode('" , "', $selectors) . '" ]';

echo "
$().ready(function() {
    var defaultSelected = $jsSelectorArray;

    for (var i=0; i < defaultSelected.length; i++) {
        $(defaultSelected[i]).each(function() {
            onChange(this);
        });
    }
});
";

?>

本文标签： javascriptManually fire event in JqueryStack Overflow