Question

当我点击图标时，我的jQuery点击功能未被触发。我不确定是什么问题。任何帮助将不胜感激。

的jQuery

 $("document").ready(function(){
     $("#abc").click(function() {
         $("#dialog-confirm").dialog({
             modal: true,
             width: 400,
             height: 400,
         });
     });
 });

现在这是图像，这就是我的链接方式。

 echo '<td>' . '<img src="edit.png" style = "height:35px;margin-left :8px;" id="abc">' . '</td>';

这是我的表格，会弹出对话框！

<body>

     <div id="dialog-confirm" style="display:none;">
         <form>      
            <label for="name">Name</label>
            <input type="name" id="name" required>
            <label for="number">Number</label>
            <input type="number" id="number" required>
            <label for="email">Email</label>
            <input type="email" id="email" required>
            <input type="submit" id="submit">
            <input type="submit" id="cancel" value="Cancel">
        </form>
    </div>


</body>

任何帮助？

以下是完整页面：

<!doctype HTML>
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jq‌uery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" ></script>

    <script src="smoke.js"></script>
    <link rel="stylesheet" href="css/venview.css">
    <script type="text/javascript">
        function deleterecord ( id ) {
            smoke.confirm("Do you want to delete?", function(result){
                if(result)
                {
                    window.location.href = 'delete_ven.php?id=' + id;
                }
                else{
                    header("Location: ven_view.php");
                }});

        }
        $(document).ready(function(){
            $("#abc").click(function() {
                $('#dialog-confirm').dialog({
                    modal: true,
                    width: 400,
                    height: 400
                });
            });
        });
        $("#submit").click (function(e){
            e.preventDefault();
            var name = $("#name").val;
            var num= $("#number").val;
            var email = $("#email").val;
            var dataString = 'name'+name+'number'+num+'email'+email;
            $.ajax({
                type:'POST',
                data:dataString,
                url:'edit_ven.php',
                success:function(data) {
                    alert(data);
                }
            });
        });
    </script>

</head>
<body>
    <?php




    include 'includes/head.php'; 
    include 'ven_connect.php';
    include "dashboard.php";


    if (isset($_GET["page"])) 
    { 
        $page  = (int) $_GET["page"]; 
    } 
    else 
    { 
        $page=1; 
    }; 
    $start_from = ($page-1) * 4; 

    $result = mysqli_query($conn , "SELECT * FROM vendor LIMIT $start_from, 4") or die (mysqli_error ($conn));

    echo "<table title='Vendors'>";
    echo '<tr>';
    echo    "<th>Sr</th>";
    echo    "<th>Edit</th>";
    echo    "<th>Delete</th>";
    echo    "<th>Name</th>";
    echo    "<th>PhoneNo</th>";
    echo    "<th>Email</th>";
    echo "</tr>";
    echo "<tr>";
    while($row = mysqli_fetch_array( $result )) {

            // display the contents of each row into a table
        echo "<tr>";
        echo '<td>' . $row['id'] . '</td>';
        echo '<td>' . '<img src="edit.png" style = "height:35px;margin-left :8px;" id="abc">' . '</td>';
        echo '<td>' . '<img src="delete.png" style = "height:35px;margin-left :8px;" onclick = "deleterecord('.$row['id'].')">' . '</td>';
        echo '<td>' . $row['Name'] . '</td>';
        echo '<td>' . $row['Number'] . '</td>';
        echo '<td>' . $row['email'] . '</td>';
        echo "</tr>"; 
    } 
    echo "</tr>";

    echo "</table>";
    ?>
    <body>

        <div id="dialog-confirm" style="display:none;">
            <form>      
                <label for="name">Name</label>
                <input type="name" id="name" required>
                <label for="number">Number</label>
                <input type="number" id="number" required>
                <label for="email">Email</label>
                <input type="email" id="email" required>
                <input type="submit" id="update">
                <input type="submit" id="cancel" value="Cancel">
            </form>
        </div>


    </body>
    <?php
    //Pagination!!  
    if($page > 1)
    {

        $prev= $page - 1;

        echo " <a href='{$_SERVER['PHP_SELF']}?page=$prev'>Prev</a> ";
    }
    $result = mysqli_query($conn , "SELECT * FROM vendor") or die (mysqli_error ($conn));
    $total_records = mysqli_num_rows($result); 
    $total_pages = ceil($total_records / 4); 

    $range = 3;


    for ($x = ($page - $range); $x <($page + $range); $x++) {

        if (($x > 0) && ($x <= $total_pages)) {

            if ($x == $page) {

                echo " [<b>$x</b>] ";

            } 

            else {

                echo " <a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a> ";
            } 
        } 
    } 
    if($page != $total_pages)
    {
        $nextpage=$page+1;
        echo " <a href='{$_SERVER['PHP_SELF']}?page=$nextpage'>Next</a> ";
    }






    ?>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


</body>

</html>

Answer 1

删除文档周围的引号：

$(document).ready(function() { // remove the quotes here arround document
    $("#abc").click(function() {
        $("#dialog-confirm").dialog({
            modal: true,
            width: 400,
            height: 400 // remove the comma here
        });
    });
});

<强>更新

的jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

jQuery UI

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

工作jsfiddle

<强>更新

<!doctype HTML>
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jq‌uery-ui.css">
    <link rel="stylesheet" href="css/venview.css">
</head>
<body>

    // other code

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script src="smoke.js"></script>

    <script type="text/javascript">
        function deleterecord ( id ) {
            smoke.confirm("Do you want to delete?", function(result){
                if(result)
                {
                    window.location.href = 'delete_ven.php?id=' + id;
                }
                else{
                    header("Location: ven_view.php");
                }});

        }
        $(document).ready(function(){
            $("#abc").click(function() {
                $('#dialog-confirm').dialog({
                    modal: true,
                    width: 400,
                    height: 400
                });
            });
        });
        $("#submit").click (function(e){
            e.preventDefault();
            var name = $("#name").val;
            var num= $("#number").val;
            var email = $("#email").val;
            var dataString = 'name'+name+'number'+num+'email'+email;
            $.ajax({
                type:'POST',
                data:dataString,
                url:'edit_ven.php',
                success:function(data) {
                    alert(data);
                }
            });
        });
        </script>

    </body>

</html>

单击Icon时，JS点击功能未触发

1 个答案: