我的第二次搜索无法使用javascript_Javascript_Jquery_Html_Ajax_Search

我的第二次搜索无法使用javascript

javascript jquery html ajax search

我的第二次搜索无法使用javascript,javascript,jquery,html,ajax,search,Javascript,Jquery,Html,Ajax,Search,我目前正在使用两个API tmdb和omdb tmdb搜索运行并返回给定搜索的所有标题，然后我想通过单击其旁边的“更多信息”按钮，使用其中一个标题运行第二次搜索该搜索正在使用omdb，但当我单击按钮时，它没有运行，什么也没有发生我还包括了我的代码，这样你就可以自己运行它，以便更好地理解并帮助我解决问题这是到目前为止的搜索截图，更容易理解我的意思代码如下 <html> <head> <title>Sample Seach</title> &

我目前正在使用两个API tmdb和omdb

tmdb搜索运行并返回给定搜索的所有标题，然后我想通过单击其旁边的“更多信息”按钮，使用其中一个标题运行第二次搜索

该搜索正在使用omdb，但当我单击按钮时，它没有运行，什么也没有发生

我还包括了我的代码，这样你就可以自己运行它，以便更好地理解并帮助我解决问题这是到目前为止的搜索截图，更容易理解我的意思

代码如下

<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie',
    input,
    movieName,
    key = '?api_key=API KEY';

    $('#search').click(function() {
        var input = $('#movie').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName ,
            dataType: 'jsonp',
            success: function(data) {

        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path +'" alt="" width="150" height="200"></td><td class="results-title">' + value.original_title + '</td><td class="results-date">' + value.release_date + 
          '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
        });
        $('#searchresult').html(table);
            }
        });
    });
});

</script>
<script text="text/javascript">
// When the more button is click this runs a search using the title of the movie it is next to  
$('.search-btn').live('click', '.search-btn', function() {
    getImdbInfo( $(this).closest('td').prev('.results-title').text() );
});

//The function below takes the entered title and searchs imdb for a match then it displays as followed

function getImdbInfo(Title) {
    var url = "http://www.omdbapi.com/?t=" + Title;
    $.ajax({
      url: url,
      cache: false,
      dataType: "jsonp",
      success: function(data) {

            var str = "";
            str += "<h2>Title :" +data.Title+ "</h2>";
            str += "<p>Plot :" +data.Plot+ "</p>";

            $("#chosenresult").html(str);
      },
      error: function (request, status, error) { alert(status + ", " + error); }
    });
}
</script>
</head>
<body>
<center>
<h1>Movie Search</h1>
<input id="movie" type="text" /><button id="search">Search</button>
</center>
<div id="chosenresult"></div>
<div id="searchresult"></div>
</body>
</html>


样本搜索
$（文档）.ready（函数（）{
var url='1〕http://api.themoviedb.org/3/',
模式='搜索/电影'，
输入，
movieName，
键='？api_键=api键'；
$（“#搜索”）。单击（函数（）{
var input=$（'#movie'）.val（），
movieName=encodeURI（输入）；
$.ajax({
url:url+mode+key+'&query='+movieName，
数据类型：“jsonp”，
成功：功能（数据）{
var表=“”；
$.each（数据、结果、函数（键、值）{
表+=''+value.original\u title+''+value.release\u date+
“没有更多的信息”；
});
$（'#searchresult'）.html（表格）；
}
});
});
});
//单击“更多”按钮后，将使用它旁边的电影标题运行搜索
$（'.search btn'）.live（'单击'，'.search btn'，函数（））{
getImdbInfo（$（this）.closest（'td'）.prev（'results title'）.text（））；
});
//下面的函数获取输入的标题并搜索imdb以查找匹配项，然后显示如下
函数getImdbInfo（标题）{
变量url=”http://www.omdbapi.com/?t=“+头衔；
$.ajax({
url:url，
cache:false，
数据类型：“jsonp”，
成功：功能（数据）{
var str=“”；
str+=“Title:+data.Title+”；
str+=“绘图：“+data.Plot+””；
$（“#chosenresult”）.html（str）；
},
错误：函数（请求、状态、错误）{alert（状态+，“+错误）；}
});
}
电影搜索
搜寻

我认为，上的

只是在jquery1.7
中添加的。如果要使用jQuery 1.5
请改用live
：
$('.search-btn').live('click', '.search-btn', function() {
    getImdbInfo( $(this).closest('td').prev('.results-title').text() );
});

而不是：
$(document).on('click', '.search-btn', function() {
    getImdbInfo( $(this).closest('td').prev('.results-title').text() );
});

我相信jQuery1.5.x中没有.on（）
，因为根据最新版本，只有在jQuery1.7中才有。相反，如果您绑定到1.5版，则应使用.delegate（）
。如果jQuery版本不是问题，那么只需在您使用的CDN路径中更改版本，即可尝试jQuery 1.10
此外，委托函数依赖于将事件绑定到父节点。
由于document
不是真正的节点，请尝试使用document.body
在您的示例中：
$(document.body).on('click', 'search-btn', function(){});

或者在jQuery 1.5中，它有点颠倒：
$(document.body).delegate('search-btn', 'click', function(){});

对于标题问题，请尝试使用以下方法：
$(this).closest('tr').find('.results-title').text();

我试图改变它，现在第二次搜索正在运行，但当我试图带来情节时，我变得不确定我认为它读的不是正确的标题？？？？？$（this）.nearest（'td'）.prev（'results title'）.text（）似乎返回了一个空值…是的，我需要它来返回电影标题按钮就在旁边我已经用你的补丁编辑了上面的代码，但我仍然不明白Tim Vermealen说的：$（this）.closest（'tr'）.find（'results title'）.text（）；上面的答案已经解决了按钮问题，现在的问题是，标题没有运行，我只是得到未定义！！这使得当前的答案听起来离题，但ok^^什么？我的问题是按钮不起作用，所以我看不出搜索是否起作用。你能想到的任何解决方案实际上你的问题是按钮上的点击事件，所以你会得到答案。当这个问题被搜索索引，人们试图找到类似问题的解决方案并找到与其他问题相关的答案时，问题就会变得更大。