使用Jquery Ajax与laravel的动态页面动态添加事件监听器 - Add eventlistner dynamically using Jquery Ajax with dynamic page of laravel

Add eventlistner dynamically using Jquery Ajax with dynamic page of laravel

我把我的页面分成了两部分。在左边，我用链接返回所有结果，在右边，我想通过使用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>

我的Jquery代码是....

$(document).ready(function(){
var url = $('input[name=url_hits_id]').val();

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

});

我想通过ajax显示结果。我的选择器有一个问题。它只显示第一个<li>元素的结果，而不是全部....我也想在点击任何时候在任何<li>标签，我想要每个标签的结果。我已经单独检查了所有页面(没有Ajax)。

像这样改变你的刀刃:

@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>

然后在Js中:

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

我没有测试它，但我认为它应该工作。让我知道它是否有效:)