1

早上好伙计们，我正在尝试学习 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>
4

5 回答 5

3

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

“对不起，我的错，按钮在那里，它是根据 ajax 请求通过 php 创建的”

解决方案，需要未来的事件

$(function() {
    $(document).on('click', '#submitButton', function(e){
        e.preventDefault();
        $('#progressBar').html("worksbro");
    })
});
于 2013-02-06T15:24:23.747 回答
3

你可以这样做

 $("#submitButton").click(function() {
         $("#progressBar").html("worksbro");
    });
于 2013-02-06T15:16:14.583 回答
1

如果你有progressBar这样的例子：

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

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

然后改为：

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

function reply()
{
     $("#progressBar").html("worksbro");
}
于 2013-02-06T15:16:37.417 回答
0

我的猜测是您在单击#submitButton.

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

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

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

function reply(){
    document.getElementById("progressBar").innerHTML = "worksbro";
    //the jQuery way:
    //$('#progressBar').html('worksbro');
}
于 2013-02-06T15:22:17.037 回答
0

可能有很多东西。也许您在 DOM 中有其他一些具有相同 ID (progressBar) 的元素会更新，而不是您期望的。将需要查看您的整个代码以确切了解问题所在。

于 2013-02-06T15:28:16.597 回答