使用带有laravel动态页面的Jquery Ajax动态添加事件侦听器

I have divided my page in two parts. At left I am echoing All results with link and at right I want to display the result by clicking any link any time using Jquery Ajax.

My Blade code is ...

<div id="left" >
 <ul>

@foreach($url_data as $url)

    <input type="hidden" name="url_hits_id" value="{{url('dashboard'.'/'.$url->id)}}">
<li>
    <a class="show_hits">
         <p>{{$url->url}} </p>
         <p> {{'http//ucut.herokuapps.com/'.$url->key}}</p><br><hr>

    </a>
</li>

@endforeach

 </ul>

<div id ="right" style="float:left">

</div>

My Jquery code is ....

$(document).ready(function(){

var url = $('input[name=url_hits_id]').val();


$('.show_hits').click(function(){
    $.get(url,function(response){
           $('#right').html(response);
    });
   });


});

I want to display the result via ajax. I have one problem with my selector. It is only showing the result of the first <li> element, not all....I also want that at clicking anytime at any <li> tag I want the result of every tag. I have checked the all page individually (without Ajax). All are working fine.

Change your blade like this:

@foreach($url_data as $url)

<input type="hidden" value="{{url('dashboard'.'/'.$url->id)}}">
<li>
    <a class="show_hits" onclick="submit({{url('dashboard'.'/'.$url->id)}});">
         <p>{{$url->url}} </p>
         <p> {{'http//ucut.herokuapps.com/'.$url->key}}</p><br><hr>
    </a>
</li>

@endforeach

<div id ="right" style="float:left"></div>

Then in your Js:

$(document).ready(function(){
    function submit(url){
        $.get(url,function(response){
             $('#right').html(response);
        });
    }
});

I didn't test it but I think it should work. Let me know if it works :)