JQueryがロードされたajaxから要素IDデータを取得

Question

PHPページのデータをJQueryでロードしていて、正常に動作しています。ここで、これらの読み込まれた要素の1つをクリックすると、選択した要素のIDがアラートとして表示されます。どのようにできるのか？私は後でajaxを使ってifを送信したいからです。私はこのコードを試しましたが、うまくいきませんでした。私は警告がjQueryのコード内のイベントにはないクリックを意味している表示されなかったことを書いたように、データコード

$(document).on("click","a",function(e){ 
$.ajax({ 
type: "POST", 
data: "id=" + $(this).attr("id"), 
url: "post_category.php" 
}); 
}); 

を送る

HTML

<li><a href="#"><strong>CATEGORY</strong><span> MENU ELEMENTS</span></a> 
     <ul class="sub-menu"> 
      <li><a id="id_1" data-target='post_category'>Sub_1</a></li> 
      <li><a id="id_2" data-target='post_category'>Sub_2</a></li> 
      <li><a id="id_3" data-target='post_category'>Sub_3</a></li> 
      <li><a id="id_4" data-target='post_category'>Sub_4</a></li> 
      <li><a id="id_5" data-target='post_category'>Sub_5</a></li> 
      <li><a id="id_6" data-target='post_category'>Sub_6</a></li> 
      <li><a id="id_7" data-target='post_category'>Sub_7</a></li> 
     <ul> 
    </li> 

jQueryの

<script> 

    $(document).on("click", "a", function() { 
     alert('worked!'); 
    }); 

</script> 

何らかの理由で働く。

---

は、私はそれらすべてを試してみました、あなたのヒントをありがとう、それはAJAXを使用してページをロードするスクリプトからだ問題の原因を発見しました。

<script> 
     $(document).ready(function(){ 
      //set trigger and container 
      var trigger = $('#nav ul li a'), 
       container = $('#container'); 
      //do on click 
      trigger.on('click', function(e){ 
       /***********/ 
       e.preventDefault(); 

       //get the link location that was clicked 
       pageurl = $(this).attr('href'); 



       //to change the browser URL to th if(pageurl!=window.location){ 
        window.history.pushState({path:pageurl},'',pageurl+'.php'); 



       /* reload content without refresh */ 
       //set loading img 
       $('#container').append('<div id = "loading">WAIT... <img src = "img/ajax-loader-small.gif" alt="Currently loading" /></div>'); 
       //change img location to center 
       $("#loading").css({"position": "absolute", "left": "50%", "top": "50%"}); 
       //get the trigger to reload the contents 
       var $this = $(this), 
        target = $this.data('target'); 

       container.load(target + '.php'); 


       return false; 

      }); 
     }); 
     // fix url in the browser when click on backward and foreword arrows 
     $(window).bind('popstate', function() { 
      $.ajax({url:location.pathname+'?rel=tab',success: function(data){ 
       $('#container').html(data); 
      }}); 
     }); 



    </script> 

この問題の原因となる部分は本当にわかりません。助けてください/

Answer 1

問題ではfalseを返すですロードレシート。

返品虚偽を取り除き、e.preventDefault();を保管して、同じことをします。

Answer 2

以下のコードを試してください。それは正常に動作しています。

<li><a href="#"><strong>CATEGORY</strong><span> MENU ELEMENTS</span></a> 
    <ul class="sub-menu"> 
     <li><a id="id_1" class="abc" data-id="id_1" data-target='post_category'>Sub_1</a></li> 
     <li><a id="id_2" class="abc" data-id="id_2" data-target='post_category'>Sub_2</a></li> 
     <li><a id="id_3" class="abc" data-id="id_3" data-target='post_category'>Sub_3</a></li> 
     <li><a id="id_4" class="abc" data-id="id_4" data-target='post_category'>Sub_4</a></li> 
     <li><a id="id_5" class="abc" data-id="id_5" data-target='post_category'>Sub_5</a></li> 
     <li><a id="id_6" class="abc" data-id="id_6" data-target='post_category'>Sub_6</a></li> 
     <li><a id="id_7" class="abc" data-id="id_7" data-target='post_category'>Sub_7</a></li> 
     <ul> 
</li> 

<script type="text/javascript"> 
    $(".abc").click(function() { 
     var id_value = $(this).data('id'); 
     alert(id_value); 
    }); 
</script> 

Answer 3

リンクがdomに追加される前に、クリックイベントを設定していると思います。 Ajaxの呼び出しは、通常の関数と少し異なります。彼らはあなたのコードをブロックしないので、あなたがajax呼び出しを行うと、javascriptは関数を呼び出し、応答を待つことはありません。残りの機能を実行します。あなたの関数の

簡単なバージョン

$.get(url, function (data) { 
     // success -> Usually just calling your function here solves the problem. 
    }).done(function() { 
     setupClickListener(); // If it doesn't append this to it for extra security. 
    }); 

function setupClickListener(){ 
$(document).on("click", "a", function() { 
     alert('worked!'); 
    }); 
} 

Answer 4

私はprobelm要素がクリックされたのあなたの認識であると思います。私はそれをこのようにします：まず、あなたのhtmlにidあなたは、その後にIDを取得することができるはずli要素

<ul> 
<li><a href="#"><strong>CATEGORY</strong> MENU ELEMENTS</a> 
<ul class="sub-menu"> 
    <li id="id_1"><a data-target="post_category"></a>Sub_1</li> 
    <li id="id_2"><a data-target="post_category"></a>Sub_2</li> 
    <li id="id_3"><a data-target="post_category"></a>Sub_3</li> 
    <li id="id_4"><a data-target="post_category"></a>Sub_4</li> 
    <li id="id_5"><a data-target="post_category"></a>Sub_5</li> 
    <li id="id_6"><a data-target="post_category"></a>Sub_6</li> 
    <li id="id_7"><a data-target="post_category"></a>Sub_7</li> 
</ul> 
</li> 
</ul> 

に移動：

jQuery("#container-fluid > section > div > div.box-body > ul > li > ul").children().on("click", function() { 
    alert('worked!'); 
    alert(this.id); 
});