Question

早上的家伙，我试图学习jquery，而且我从js知道的帽子，这应该是有效的，但它不是......基本上点击提交按钮，它应该改变内部的html。有经验的人有什么想法吗？

jquery的：

$(function() {
    $("#submitButton").click(function(){
        reply();
    })
});

function reply(){
 document.getElementById("#progressBar").innerHTML = "worksbro";
}

HTML：

<button type="button" id="submitButton">Submit</button>

如果我没弄错，这应该有效。它应该更改progressBar但是onclick什么都不做

消除一些困惑：

<div id = "progressBar"></div>

所有代码：

<!DOCTYPE html>
<html>
<head>
<script src="theJS.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {
    $("#submitButton").click(function(){
        reply();
    })
});

function reply(){
 $("progressBar").html("worksbro");
}

</script>


<title>
One neat van page
</title>
</head>
<body>
<div id="tableone">
<?php
//connect to db
include 'connect.php';

//start the table float left
cho '<table>';
echo '<tr><td style="background-color:#03899C; color:white; text-align:center;">Driver</td>
<td style="background-color:#03899C; color:white; text-align:center;">Van</td></tr>';

//lets get dem drivers and vans
//actually just the vans, realistically. 
$sql= 'SELECT *
FROM Vans';

//make a table float let with driver name and an info(keep it simple)
foreach($conn->query($sql) as $row) {
  echo '<tr id="'.$row['Owner'].'" style="cursor:pointer;" onClick="more(this.id)">';
    echo "<td style=\"background-color:#FFFC00;\"><a href=#>".$row['Owner']."</a></td>";
    echo "<td style=\"background-color:#FFFC00;\">".$row['Year']." ".$row['Make']." ".$row['Model']."</td>";
  echo '<tr>';      
}

echo '</table>';
?>
</div>

<div id="more">
<div id="edit"></div>
<h1 id="van"><u>More Info</u></h1>
<div id="vanList">
</div><!--end vanList-->
</div>

<div id = "progressBar">
<progress value="0" max="100"></progress>
</div>

<div id="innactive">
<h3>Innactive Vans</h3>
<table>
<?php
//connect to the database
include 'connect.php';
//get inactive vans
//my brain is mush right now, so bear with me...
$sql = "SELECT *
FROM Vans
";



foreach($conn->query($sql) as $row) {
if (!empty($row['Innactive'])){

echo '<tr><td style="background-color:#03899C; color:white; text-align:center;">Driver</td>
<td style="background-color:#03899C; color:white; text-align:center;">Van</td></tr>';

  echo '<tr id="'.$row['Owner'].'" style="cursor:pointer;" onClick="more(this.id)">';
    echo "<td style=\"background-color:#FFFC00;\"><a href=#>".$row['Owner']."</a></td>";
    echo "<td style=\"background-color:#FFFC00;\">".$row['Year']." ".$row['Make']." ".$row['Model']."                    </td>";
  echo '</tr>';
}
}



?>




</div>
</body>
</html>

Answer 1

你可以通过

来做到这一点

 $("#submitButton").click(function() {
         $("#progressBar").html("worksbro");
    });

Answer 2

现在我们有完整的代码问题很清楚...... HTML中没有#submitButton -

“对不起，我的坏人，按钮在那里，它是通过php在ajax请求时创建的”

解决方案，需要未来的活动

$(function() {
    $(document).on('click', '#submitButton', function(e){
        e.preventDefault();
        $('#progressBar').html("worksbro");
    })
});

Answer 3

例如，如果你有progressBar这样的话：

<div id="progressBar"></div>

<button type="button" id="submitButton">Submit</button>

然后改为：

$(function()
{
    $("#submitButton").click(function()
    {
        reply();
    })
});

function reply()
{
     $("#progressBar").html("worksbro");
}

Answer 4

我的猜测是，您在点击#submitButton时提交表单。

表单的默认操作将回发到页面本身，这将导致#progressBar具有其原始值。

尝试添加<input type="button"/>元素并处理上面的onclick事件，甚至是

$(function() {
    $("#submitButton").click(reply);
});

function reply(){
    document.getElementById("progressBar").innerHTML = "worksbro";
    //the jQuery way:
    //$('#progressBar').html('worksbro');
}

Answer 5

可能是很多事情。也许你在DOM中有一些其他元素具有相同的ID（progressBar），它会更新而不是你期望的那个。需要查看整个代码才能确切地看出错误。

JQuery没有运行点击

5 个答案: