0

ajaxを介してdivにロードされるボタンでjqueryクリックイベントを発生させようとしていますが、ajaxを介してロードされたボタンをチクするとイベントは発生しません

ダッシュ.php

<!DOCTYPE html>
<html>
 <head>
 <title>aquatrol</title> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<!-- Bootstrap -->
<script type="text/javascript" >
function dash_refresh() {

    var hr = new XMLHttpRequest();
    var url="dash_refresh.php";
    var stl="A";
    var vars="?STL="+stl;
    var url_full=url+vars+"&t=" + Math.random();

    hr.open("GET",url_full,true);

    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

   hr.onreadystatechange = function() {
       if(hr.readyState == 4 && hr.status == 200) {
           var return_data = hr.responseText;
            document.getElementById("dash-content").innerHTML = return_data;
       }
   }
    hr.send();
    document.getElementById("dash-content").innerHTML='<img src="img/ajax.gif" alt="Processing..." />';
}

setInterval(function(){
      dash_refresh();
},10000);
</script>
 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen"> 



<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

<style type="text/css">
.btn-group[data-switch="true"] .btn.active {
font-weight: bolder;
}

</style>
</head>
 <body onload="javascript:dash_refresh();"> 
<a href="#" onclick="javascript:dash_refresh();" class="btn btn-primary pull-right">Refresh</a>
<hr>

<div class="container-fluid">
<div class="row-fluid" id="dash-content">
</div>
</div>



<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$("[data-switch='true']").on("click", ".btn", function() {
    var $this = $(this);


    if (!$this.hasClass("btn-info")) {
        $this.addClass("btn-info");
        var id=$this.attr('id');
    var value=$this.attr('value');
    alert("ID "+id+" Val "+value);

        $this.siblings().removeClass("btn-info");

    }
});
</script>


</body>
</html>

dash_refresh.php

<?
//some php here
?>

<div class="container-fluid">
<div class="row-fluid">

<div class="span12 well" style="text-align:center;">


<div class="btn-group" data-switch="true" data-toggle="buttons-radio">
    <button type="button" class="btn btn-small btn-info active" id="12" value="A">Auto</button>
    <button type="button" class="btn btn-small" id="12" value="1">On</button>               
    <button type="button" class="btn btn-small" id="12" value="0">Off</button>               

</div>

</div>
</div>
</div>

この問題の解決を手伝ってください。

4

2 に答える 2

3

ページの読み込み時にハンドラーが存在しないため、clickハンドラーをアタッチできません。[data-switch='true']に添付する必要があり#dash-contentます：

$('#dash-content').on('click', '[data-switch="true"] .btn', function() {
    // your code
});
于 2013-05-10T14:43:16.667 に答える
3

まず、すべてのボタンの ID が同じ id="12"です。これらのボタンのクリックをトリガーしています。これが問題を引き起こしている可能性があります。変更してください。

<button type="button" class="btn btn-small btn-info active" id="12" ..
<button type="button" class="btn btn-small" id="12    ...            
<button type="button" class="btn btn-small" id="12"  ....

これは副作用です。クリック イベントの問題については、@Billy answer を参照してください。

于 2013-05-10T14:38:24.643 に答える