2011-12-18 5 views
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<script type="text/javascript" src="jquery.js"></script> 


    <script type="text/javascript"> 

    function buttonClicked(e) 
    { 

    alert(e.data.color); 
    } 

jQuery('#but1').bind('click',{color:'red'},buttonClicked); 
    jQuery('#but2').bind('click',{color:'blue'},buttonClicked); 
</script> 
</head> 



<body> 

<br/><br/><br/><br/> 
    <div align="center"> 
    <form action="" method="get"> 

    <input id="but1" type="button" value="Red" /> 
    <input id="but2" type="button" value="Blue" /> 
    </form> 
    </div> 


</body> 
</html> 

Предупреждение не срабатывает при щелчке .. что это такое?jQuery не запускает событие

ответ

1

Это работает:

function buttonClicked(e) { 
    alert(e.data.color); 
} 

$(document).ready(function(){ 
    jQuery('#but1').bind('click',{color:'red'},buttonClicked); 
    jQuery('#but2').bind('click',{color:'blue'},buttonClicked); 
}); 

http://jsfiddle.net/RTXxY/

+0

почему он не работает за пределами документа готовых –

+0

Поскольку элементы вы выбираете еще не доступны, если обработчики нажмите установлены в разметка перед падением элементов. Когда страница анализируется, элементы становятся доступными для DOM; '$ (document) .ready()' ждет, пока страница не будет полностью проанализирована и не будет готова. –

+0

Проверьте документацию на функцию '' '' '' '' '' '' '' '' '' ': http://api.jquery.com/ready/ – canon

1

У вас есть сценарий, расположенный выше, где элементы определены так, когда код выполняется, с которым нет привязки. Самое простое решение - только выполнить сценарий, когда документ будет готов.

jQuery(function($) { 
    $('#but1').bind('click',{color:'red'},buttonClicked); 
    $('#but2').bind('click',{color:'blue'},buttonClicked); 
}