Question

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

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

该搜索正在使用omdb但是当我点击按钮没有任何反应时它没有运行

我还包含了我的代码，所以你可以自己运行它来更好地理解并希望能帮助解决我的问题这是截至目前为止的搜索截图，因此更容易理解我的意思

enter image description here

下面的代码

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

Answer 1

我认为on仅在jQuery 1.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() );
});

而不是：

{{1}}

Answer 2

我相信jQuery 1.5.x你没有.on()，因为根据specs，它只能在jQuery 1.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();

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

2 个答案: