0

Tinybox 2 を使用して、静的な html ページを popup に表示しています。問題は、その静的ページ内で jquery を使用したいことです。

プラグインのリンクは次のとおりです。

http://sandbox.scriptiny.com/tinybox2/

への呼び出し: Tinybox:

<a href="#" onclick="TINY.box.show({url:'photos.php?id=<?php echo $result_set['id'];?> ',width:900,height:400})">Read More </a>

photos.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
$(document).ready(function(){         //this won't work why? 
  $("#cmdstxt").click(function(){
    $("#cmdz").append(" cmds txt");
  });
});


</script>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>HTML</title>
    <style>
body   {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
width:900px;
margin:0 auto;

}


html {
overflow-y: auto;
background-color: transparent;
}


::-webkit-scrollbar {
width: 10px;
height: 10px;
}


::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 30px;
display: block;
background-color: transparent;
}



::-webkit-scrollbar-track-piece  {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}


::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}

        div#photo{
            width:390px;
            height:290px;

            float:left;
            padding:5px;
            !background-color:#3B5998;
        }
        div#about{
            width:450px;
            height:150px;
            overflow: scroll;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        div#cmds{
            width:400px;
            height:300px;
            float:right; 
            border-left: 2px solid black;
        }
        img{
            max-height:150px;
        }

        .clear{
            clear: both;
        }


        textarea{
            width:300px;
        }

    </style>

    </head>

    <body>
<?php 
require_once("includes/database.php");
if(isset($_GET['id'])){
    $id=$_GET['id'];
}

$query="SELECT *
FROM `photo`
WHERE `id` ='${id}' ";
$result=$db->query($query);
$result_set=$db->fetch($result);
?>      


        <div id="photo">
        <h1><?php echo $result_set['title']; ?></h1>    
        <img src="uploads/<?php echo basename($result_set['path']); ?>" />  

        <div id="about"><?php echo $result_set['about']; ?></div>
        </div>

        <div id="cmds">
            <div id="cmdz"> </div>
            <textarea name="about" id="cmdstxt"></textarea>
        </div>
        <p class="clear" />

    </body>
</html>
4

2 に答える 2

1

成功呼び出し内に jQuery スクリプトを記述する必要があります。例 ：

$(document).ready(function(){
    // When you click on the element below, you will see "clicked".
    $('.element').click(function(){
        alert('clicked');
    });

    $.ajax({
        url: a_cross_domain_url,
        success: function(data){
            // data will return something like : <a class="element">Click me!</a>
            $('.element').click(function(){
                alert('no nono');
            });

            // Clicking on element will return "no nono".
            alert(data);
        }   
    });
});

<a class="element">Click me!</a>

イベントは再度バインドされません。この問題を解決するには、次の 3 つの方法があります。

  • .live() を使用して、イベントを AJAX で読み込まれた要素 (jQuery 1.3 以降) に自動的にバインドします。
  • 新しくロードされた AJAX 要素にイベントを明示的にバインドします。
  • 3 番目の方法は、イベントの伝播を使用することです。jQueryブログで検索してください。
于 2012-06-14T14:17:16.073 に答える
0

IFrame を使用して問題を解決しました: これが私のコードです:

<a href="#" onclick="TINY.box.show({iframe:'photos.php?id=<?php echo $result_set['id'];?>',boxid:'frameless',width:900,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})" >Read More </a>

ありがとう。

于 2012-06-15T12:25:17.857 に答える