Функция вызывает динамически загружаемое содержимое

У меня есть файл PHP, который обслуживает некоторый HTML, заполненный из базы данных MySQL и загружаемый в DOM. Эти данные загружаются с помощью метода jQuery load() в раздел #navContent документа HTML. Это работает как строгий.Функция вызывает динамически загружаемое содержимое

На самом дне в HTML документ, у меня есть функция щелчка таргетингом на #navItem DIV (увидеть первый эхо строки файла PHP), который динамически загружается в DOM, но это делает не огонь. Я знаю, что идентификатор тега #navItem есть, потому что мои CSS стилизуют его правильно.

У меня что-то не так? На данный момент я просто хочу, чтобы все деления, которые были динамически созданы, в div #navContent, чтобы перейти к URL-адресу.

Я новый и просто изучаю jQuery, поэтому исправленный код будет очень полезен. Thnx

В HTML:

<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 File:

<?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 была добавлена с помощью пользовательской разметки. Это прекрасный пример того, как программирование ООП будет творить чудеса.

Вы также не сработал метод щелчка в док-готовый ...

<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, я попробовал, что и раньше (и снова попытался Теперь точно в случае), но все еще ничего. Любые другие идеи ??? – CelticParser

Оба способа. лол. – CelticParser

Я еще раз посмотрю на него. В ваших функциях, на которых я действительно не смотрел, может быть еще одна ошибка. –

Функция вызывает динамически загружаемое содержимое

ответ

Смежные вопросы