Question

我通过ajax调用得到一个json编码的数组。 var_dump()它...

0 => array (size=1) 'img' => string '<a href="comment.php?id=1388861073123153033"><div class="gallery-img"><img src="media/uploads/1388861073123153033/1.jpg" data-gallery-target="1388861073123153033" data-gallery-title="first" data-gallery-description="The first image" data-gallery-author="tor" data-gallery-time="1 day ago" /><a class="btn btn-primary gallery-img-pop" href="#" data-gallery-target="1388861073123153033"><span class="fui-photo"></i></a></div></a>' (length=427) 
1 => array (size=1) 'img' => string '<a href="comment.php?id=1388861115385194915"><div class="gallery-img"><img src="media/uploads/1388861115385194915/2.jpg" data-gallery-target="1388861115385194915" data-gallery-title="second" data-gallery-description="The second image" data-gallery-author="tor" data-gallery-time="1 day ago" /><a class="btn btn-primary gallery-img-pop" href="#" data-gallery-target="1388861115385194915"><span class="fui-photo"></i></a></div></a>' (length=429)

然后我用jquery解码它并将它附加到div：

request.done(function (response, textStatus, jqXHR){ 
  //alert(response);
  $('#gallery a').fadeOut(1000);
  $('#gallery').html("");
  var decodeCom = jQuery.parseJSON(response); 
  setTimeout(function() {
   $.each(decodeCom, function(key,value) {
     $('#gallery').append(value.img).hide().fadeIn(1200);
   });
  }, 500);
});

但是当我检查#gallery div的html时，每个块都缺少其中的最后</a>个标签。我甚至通过添加value.img来检查alert(value.img)在append之前它没关系到那里但是在追加它之后剥掉了最后的</a>，为什么呢？我做错了什么？

更新

$('.gallery-img').on('mouseenter mouseleave', function () { 
    $(this).find('.gallery-img-pop').fadeToggle(100); 
});

新回复：

<a href="comment.php?id=1388861073123153033">
  <div class="gallery-img">
    <img src="media/uploads/1388861073123153033/1.jpg" data-gallery-target="1388861073123153033" data-gallery-title="first" data-gallery-description="The first image" data-gallery-author="tor" data-gallery-time="1 day ago" />
    <span class="btn btn-primary gallery-img-pop" data-gallery-target="1388861073123153033"><i class="fui-photo"></i></span>
  </div>
</a>

更新2（整个脚本）：

 ///gallery
  function modalTrigger(targetId) {

    target = $('img[data-gallery-target='+targetId+']');
    id =  $(target).attr('data-gallery-target');
    title = $(target).attr('data-gallery-title');
    src = $(target).attr('src');
    author = $(target).attr('data-gallery-author');
    desc = $(target).attr('data-gallery-description');
    timePosted = $(target).attr('data-gallery-time');

    $('.main-img').html('<img src="'+src+'" />');
    $('.user-link').html(author);
    $('.user-link').attr('href','user.php?id='+author);
    $('#popup-com').attr('href','comment.php?id='+id);
    $('#popup-like').attr('href','comment.php?id='+id);
    $('.user-time').html('- '+timePosted);
    $('.comment-desc').html(desc);
    $("#popup-gallery").modal({ fadeDuration: 1000, fadeDelay: 0.8, zIndex: 210 });

  };

  $('.gallery-img-pop').click(function() {
    event.preventDefault();

    var targetId = $(this).attr('data-gallery-target');
    modalTrigger(targetId);
  });

  /* //This is what I had
  $('.gallery-img').on('mouseenter mouseleave', function () { 
    alert(1);
    $(this).find('.gallery-img-pop').fadeToggle(100); 
  });
  */

  $('#gallery').on('.gallery-img', 'mouseenter mouseleave', function(){ 
    alert('test');
  });

  $('.main-img').click(function() {
    event.preventDefault();
    $.modal.close();     
  });

  //search
  //This is what updates #gallery
  function searcher(key) {
    event.preventDefault();

    //abort pending request
    var request;       
    if (request) { 
      request.abort(); 
    } 

    if((key==1) || ($('.pagination').hasClass('isHidden'))) {
      $('.pagination').removeClass('isHidden');
      $('.pagination').fadeIn(1200);
    } else {
      $('.pagination').addClass('isHidden');
      $('.pagination').fadeOut(600);
    } 

    if(key!="") {

      $('#gallery').css({'opacity':'0.4'});
      request = $.ajax({ 
                  url: 'controller/model.php', 
                  type: 'POST',
                  timeout: 2000,
                  cache: false,
                  data: 'key='+key+'&method=searcher',
                });

      request.done(function (response, textStatus, jqXHR){ 
        //alert(response);
        $('#gallery a').fadeOut(1000);
        $('#gallery').html("");
        var decodeCom = jQuery.parseJSON(response); 
        setTimeout(function() {
          $.each(decodeCom, function(key,value) {
            //alert(value.img);
            $('#gallery').append(value.img).hide().fadeIn(1200);
          });
        }, 500);
      });

      request.fail(function (jqXHR, textStatus, errorThrown){ 
        alert('Failed, please reload');
      });

      request.always(function () {
        setTimeout(function() {
          alert($("#gallery").html());
          $('#gallery').css({'opacity':'1'});
        }, 3000);
      });

    } else {

      alert("Can't be empty");

    }

  };

Answer 1

使用“on”悬停来回答您的更新问题。您在将侦听器添加到dom之前设置它们。将您的on更改为：

$('#gallery').on(
   'mouseenter mouseleave', 
   '.gallery-img',   
   function(){ 
         alert('test')
    }
 )

我在您的代码中看到的其他重要事项。您的函数function modalTrigger(targetId) {在全局范围内声明了一堆变量。你应该在它们前面加上var。

e.g：

 var target = $('img[data-gallery-target='+targetId+']')

您的点击功能会引用您从未包含的事件变量。

原始问题：

标记的两个主要问题（可能是相关的），以及一个锚的嵌套。

<a href="comment.php?id=1388861073123153033">

立即关闭。

其他问题

</i>
未公开的<span class="fui-photo">代码..
数据库标题属性data-gall ery-title="first"

我认为你需要改变

<span class="fui-photo"></i>

到

<span class="fui-photo"></span>

以下是您要返回的标记：

<a href="comment.php?id=1388861073123153033">
    <div class="gallery-img">
        <img src="media/uploads/1388861073123153033/1.jpg" data-gallery-target="1388861073123153033" data-gallery-title="first" data-gallery-description="The first image" data-gallery-author="tor" data-gallery-time="1 day ago" />
        <a class="btn btn-primary gallery-img-pop" href="#" data-gallery-target="13 88861073123153033"><span class="fui-photo"></i></a>
    </div>
</a>
<a href="comment.php?id=1388861115385194915">
    <div class="gallery-img">
        <img src="media/uploads/1388861115385194915/2.jpg" data-gallery-target="1388861115385194915" data-gallery-title="second" data-gallery-description="The second image" data-gallery-author="tor" data-gallery-time="1 day ago" />
        <a class="btn btn-primary gallery-img-pop" href="#" data-gallery-target=" 1388861115385194915">
            <span class="fui-photo"></i>
        </a>
    </div>
</a>

仅剥离

1 个答案: