Question

这是我的代码，现在灯箱工作正常。 Dialogbox仅在我们删除灯箱脚本时有效。任何人都可以建议可能是对话框没有加载的原因？在chrome控制台上它显示Uncaught TypeError：无法调用方法'click'of null

<?php
    include 'header.inc.php';
    $floor_id=$_GET['id'];
    $path='floorPlanImages';
    //include 'addImageForPlan.php';
    $select_floor_images=mysql_query("SELECT id,image FROM zb_floorplan_gallery WHERE floor_id='$floor_id'");
    if(mysql_num_rows($select_floor_images)>0)
    {
    ?>

    <html lang="en">
    <!doctype html>
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="css/style.css" />




    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  
    </head>

    <table>

        <tr><th colspan="5">Image gallery</th></tr>
        <tr>

    <?php
    $count=0;
    while ($display_image=mysql_fetch_assoc($select_floor_images)) {

        ?>
        <td class="<?php echo $display_image['id'];?>" height="100" width="100">

        <!-- <img src="<?php echo $path.'/'.$display_image['image'];?>" width="100%" rel="lightbox[roadtrip]" class="<?php echo $display_image['id'];?>"></a> -->&nbsp;&nbsp;
         <a href="<?php echo $path.'/'.$display_image['image'];?>" rel="lightbox[gallery]" title="Floor Plan images">
            <img src="<?php echo $path.'/'.$display_image['image'];?>" width="100%" >
         </a>

           <a href="#" class="table-icon delete" title="Delete" id="<?php echo $display_image['id'];?>"></a></td>
        <?php
        $count++;
        if($count==4)
        {
        ?></tr><?php $count=0;
        }

    ?>


    <script type="text/javascript">
     $( document ).ready(function() {


            $('#<?php echo $display_image['id'];?>').click(function(){
            $( '#<?php echo $display_image['id'];?>').html("Are you sure you want to delete this image?").dialog(
                {

                     buttons: {
        'Confirm': function() {
           //do something
           $.ajax({
      type: "POST",
      url: "deleteFloorImage.php?id=<?php echo $display_image['id'];?>",
      data: { id: "<?php echo $display_image['id'];?>" }
    }).done(function( msg ) {

    $("td.<?php echo $display_image['id'];?>").hide();

    });
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
                }
            );
            });




      });
      </script>



    <?php
    }
    ?>
    </table>


    <?php
    }
    else {
        echo 'No images found for this floor plan';
    }
    include 'footer.inc.php';
    ?>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>

Answer 1

观察您的DOM以查找错误。

也许这是与lib的jquery冲突。

尝试编写jQuery.noConflict();之前：

$( document ).ready(function().....

把你的lib：

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

在调用你的jquery lib之后

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

实施灯箱后，Jquery对话框无法正常运行

1 个答案: