Question

尝试在按钮上触发jquery click事件，该按钮通过ajax加载到div中但是，当我按下通过ajax

的按钮时，事件会发生火灾

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

请帮我解决这个问题？

Answer 1

首先，您的所有按钮都具有相同的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 2

您无法将click处理程序附加到[data-switch='true']，因为在加载页面时它不存在。您必须将其附加到#dash-content：

$('#dash-content').on('click', '[data-switch="true"] .btn', function() {
    // your code
});

Jquery事件没有被解雇

2 个答案: