機能は、動的にロードされたコンテンツ

のために、私は、MySQLデータベースから移入いくつかのHTMLを提供しており、DOMにロードされたPHPファイルを持って呼び出します。このデータは、jQuery load（）メソッドを経由してHTMLドキュメントの#navContent divideにロードされます。これは計画どおりに機能します。 HTMLドキュメントの非常に-下部にある機能は、動的にロードされたコンテンツ

、私は動的にDOMにロードされたが、これはいた#navItemのdiv（は、PHPファイルの最初のエコーラインを参照）を標的クリック機能を持っています火事ではない。 CSSが正しくスタイルを設定するため、#navItemタグIDがあります。

私が間違って何を持っていますか？今のところ、動的に作成されたすべての分割を#navContent divにURLを使用してクリックしてください。

私は初心者くさいだとちょうどjQueryのように修正されたコードを学ぶことは非常に参考になります。 HTMLでのthnx

：

<html> 
<head> 
    <script type="text/javascript"> 
    . . . 
    var ajaxLoader = ''; 
    var dns = 'http://www.someURL'; 
    var navContent = '/folder/my_list.php'; 
    var bodyContent = '/folder/index.php/somestuff #content'; 

     $(document).ready(
     function() { 
      loadPage(dns + navContent, "navContent"); 
      loadPage(dns + bodyContent, "bodyContent") 
     }); 
    . . . 
    </script> 
    . . . 
</head> 
<body> 
    . . . 
    <div id="navPanel"> 

      <div id="navHeader"> 
       <img src="images/ic_return.png" style="float: left;"/> 
       <img id="listSortBtn" src="images/ic_list_sort.png" style="float: right;"/> 
       <h4 id="navHeaderTitle"></h4> 
      </div> 

      <div id="navScrollContainer" class="navContentPosition"> 
       <div id="navContent">NAVIGATION CONTENT GETS DUMPED IN HERE</div> 
      </div> 

     </div> 
    . . . 
</body> 
<!-- ================ Functions ===================================== --> 
<!-- **************************************************************** --> 

<script type="text/javascript"> 

    /* --------------- Handle Pg Loading ----------------- */ 
    function loadPage(url, pageName) { 
     $("#" + pageName).load(url, function(response){ 
      $('#navHeaderTitle').text($(response).attr('title')); 
    //   transition("#" + pageName, "fade", false); 
     }); 
    }; 

    /* ------------- Click Handler for the Nav Items------ */ 
    $("#navItem").click(function(e) { 
     e.preventDefault(); 
     var url = 'http://www.google.com'; 
     var pageName = 'navContent'; 
     loadPage(url, pageName); 
    }); 
    . . . 
</script> 
</html>

添えPHPファイル：

<?php 
$con = mysql_connect("localhost","root","pw"); 
if (!$con) 
{ 
die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db("andaero", $con); 
$result = mysql_query("SELECT * FROM some_list"); 

while($row = mysql_fetch_array($result)) 
{ 
echo "<div id='navItem' title='My Nav Title'>"; 
echo "<h1>" . $row['label'] . "</h1>"; 
echo "<h2>" . $row['title'] . "</h2>"; 
echo "<p>" . $row['description'] . "</p>"; 
echo "</div>"; 
} 
mysql_close($con); 
?>

出典

2012-03-29 CelticParser

DOMは、カスタムマークアップが付加された後には、そのクリックの方法を初期化する必要があります。これは、OOPプログラミングが不思議になる場合の完全な例です。

はまた

<script type="text/javascript"> 
function MyConstructor() 
{ 
    this.ajaxLoader = ''; 
    this.dns = 'http://www.someURL'; 
    this.navContent = '/folder/my_list.php'; 
    this.bodyContent = '/folder/index.php/somestuff #content'; 

    this.loadPage = function(url, pageName) 
    { 
     $("#" + pageName).load(url, function(response){ 
      $('#navHeaderTitle').text($(response).attr('title')); 
     }); 
     this.toggles(); 
    } 

    this.toggles = function() 
    { 
      var t = this; 
     $("#navItem").click(function(e) { 
      e.preventDefault(); 
      var url = 'http://www.google.com'; 
      var pageName = 'navContent'; 
      t.loadPage(url, pageName); 
     }); 
    } 

    /************************************** 
    *Init Doc-Ready/Doc-Load methods 
    **************************************/ 
    this.initialize = function() 
    { 
     this.loadPage(this.dns + this.navContent, "navContent"); 
     this.loadPage(this.dns + this.bodyContent, "bodyContent"); 
    } 
    this.initialize(); 
} 

$(document).ready(function(){ 
    var mc = new MyConstructor(); 

    //now, you can go ahead and re-run any methods from the mc object :) 
    //mc.loadPage(arg, 'ye matey'); 
}); 
</script>

出典

2012-03-29 00:39:38

のthnx、私はその前に試してみました... DOC-準備にクリックメソッドをロードしませんでした（そして今再び、ジャスト・イン・ケース試さない）、まだ何も。他のアイデア??? – CelticParser

両方の方法。笑。 – CelticParser

私はまもなくそれをもう一度見てみましょう。私が実際に見ていないあなたの機能の中に別のバグがあるかもしれません。 –

機能は、動的にロードされたコンテンツ

答えて

関連する問題