weixin_33726318 2014-11-28 09:59 采纳率: 0%
浏览 11

JavaScript淡入/淡出Div

I have a search input #submit, once an ISBN is submitted a div fades in below showing the results (from Google Books Api). I then have a button 'Add to Library' #add - this successfully adds the info into my db via Ajax and fades out the div, all good so far.

However when I input another ISBN and click #submit - nothing appears. The div is still hidden (or faded out). How can I make the div 'reset' to it's default setting after it has faded-out? I have to manually refresh the page each time I want to search.

I am most likely doing something very silly as I am new to JS, however any help/direction is much appreciated. I have been looking at the jQuery fadeToggle() Method - is this correct?

My Code

$(document).ready(function() {
    $('#submit').click(function(ev) {
        ev.preventDefault();

        $.getJSON(url,function(data){
            $("#add").prop('disabled', false);
            $.each(data.items, function(entryIndex, entry){
                var html = '<div class="results well">';   
                html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';  
                html += '<hr><button id="add" name="add">add to library</button>';
                $(html).hide().appendTo(".result").fadeIn(1000);

                $('#add').click(function(ev) {
                    ev.preventDefault();

                    $.ajax({
                        type: 'POST',
                        url: 'addIsbnScript.php',
                        data: {
                            'isbn' : isbn,
                            'title' : entry.volumeInfo.title
                        },
                        success: function () { //when form has been submitted successfully do below
                            $('.result').fadeOut(1000); //fade out the results div
                        }//end success function
                    });//end ajax
                });//end add button funct 
            });//end of each function
        });//end getJSON
    });// end submit.click
});//end
  • 写回答

2条回答 默认 最新

  • weixin_33734785 2014-11-28 10:07
    关注

    Change

    $('.result').fadeOut(1000);
    

    to

    $('.results').fadeOut(1000);
    

    Don't use the same ID for each add button, because you are adding multiple buttons. So <button id="add" ...> isn't unique after the second press. The add button ID should match the selector of the click event handler. For example:

    $(document).ready(function() {
         var addID = 1;
    
         $('#submit').click(function(ev) {
             ev.preventDefault();
    
             $.getJSON(url,function(data){
                 $("#add").prop('disabled', false);
                 $.each(data.items, function(entryIndex, entry){
                     var html = '';   
    
                     addID++;
                     html += '<div class="results well">';
                     html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';  
                     html += '<hr><button id="add'+addID+'" name="add">add to library</button>';
                     $(html).hide().appendTo(".result").fadeIn(1000);
    
                     $('#add'+addID).click(function(ev) {
    ...
    
    评论

报告相同问题?

悬赏问题

  • ¥20 收一个快手协议下单算法
  • ¥15 求一个图片中的成交量选股公式
  • ¥15 已知正方形内随机生成坐标matlab
  • ¥30 关于#python#的问题:我想要的是这79个大特征对于房屋售价的最大的影响前十名(相关搜索:随机森林)
  • ¥15 使用matlab计算自定义特殊函数的二重积分,改变积分顺序所得的结果不同的问题?
  • ¥15 mysql做碎片化处理老是报错怎么办
  • ¥15 如何正确在vs2010中初始化map对象
  • ¥30 mmdet3d模型部署问题
  • ¥15 comsol仿真反射率、吸收率时峰值位置和深度不对!
  • ¥30 Visual Studio找不到sdk,如何解决?