2012-07-23 6 views
2

JQuery에서 입력 상자 목록을 동적으로 만들고 체크했을 때 알려주는 이벤트가 있습니다.Jquery에서 수동으로 이벤트 발생

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

페이지가로드 모든 체크 박스가 표시 할 때 - 난이/선택 취소 확인하여 입력 할 수 있습니다. 문제는 내 백엔드 로직의 결과에 따라 초기에 이들 중 몇 가지를 확인하기를 원합니다. 그래서 초기로드 후에이 함수를 입력하고 싶습니다.

나는 .trigger().click()을 보았지만 어느 것도 그 트릭을 수행하지 않는 것으로 보인다.

이 콜백에 입장 할 수있는 또 다른 방법이 있습니까?

+0

무엇 대답해라. jsFiddle을 만들 수 있습니까? – davidbuzatto

+3

'change' 이벤트에 연결 했으므로'.change()'를 시도 했습니까? – MrOBrian

답변

1

익명 개체를 사용하는 대신 명명 된 함수를 만들고 필요할 때마다 호출 할 수 있습니다.

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); 
+0

in my $ document.ready 나는 지금 당신의 $ ("# myDiv")을 가지고있다. ("change", "input [type = 'checkbox']", myFunction); 및 그 확인란을 선택할 때마다 작동합니다. 그러나 $ ("# myDiv input [type = 'checkbox']").각 (myFunction); 은 상기 기능을 호출하지 않습니다. –

+0

$ (document) .ready()에 넣어야합니다. 그렇지 않으면 DOM이 아직로드되지 않았고 요소가 존재하지 않습니다. – JJJ

0

myDiv이 변경 될 때 코드가 실행되고 확인란 목록이 전달됩니다. 여기 'this'는 mydiv입니다. 단지 checked

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

당신이 change(); 이벤트를 해고 할 경우에 checked 속성을 설정

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

흠, 나는 방화범이 낀다. 'this'는 전체 문서를 가리키고있다. 그러나 발사 단계가 더 가까워졌습니다. –

2

당신이 체크 박스에 체크 표시 할 경우,

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

나 : 왜 사용하지

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

함수를 이름별로 따로 정의한 다음 선택 해제 된 각 항목에 대해 페이지가로드 된 후에 함수를 호출하십시오.

function onChange(this) { 
    if(this.checked){ 
     alert("HERE"); 
     //... 
    }else{ 
     alert("THERE"); 
     //... 
    } 
} 
체크 박스가 변경 될 것 모니터링

귀하의 코드 :

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

나는 코드가, 내가 확인란을 인쇄하고있는 것을 정의하는 몇 가지 코드를 작성했습니다 어떻게 생겼는지 알 수 없기 때문에 기본적으로 선택됩니다. 그것은 PHP지만 개념은 모든 서버 측 언어에서 작동해야합니다.

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

선택한 각 옵션에 대해 실행하려는 기능을 실행하는 javascript를 인쇄해야합니다. 내가 사용하는 체크 박스 예를 들어, 당신이 원하는 것 그 최종 결과는 다음과 같습니다

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

    for (var i=0; i < defaultSelected.length; i++) { 
     $(defaultSelected[i]).each(onChange); 
    } 
}); 
당신은 서버 측 자바 스크립트를 생성해야합니다

: 잘 모르겠어요

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

?>