jQuery点击函数从第二次开始返回undefined

时间：2016-07-06 08:54:16

标签： jquery-ui modal-dialog click html5-video

您好我正在使用jqueryui Dialog中的视频加载。当我第一次点击它的工作正常。但是，当我再次点击相同的元素时，它会抛出一个空对话框。 以下是我工作的代码段。

$(function() {
  $(document).on('click', '.wmBox', function(ev) {
    ev.preventDefault();
    //console.log($(this).children());
    var data = $(this).children('div').attr('id');
    var title = $(this).children('div').attr('title');
    //console.log(data + '----' + title);
    $('#' + data).show();
    $('#' + data).appendTo('#dialogDiv').removeClass('hide');
    ht = $(document).height() / 2;
    wd = $(document).width() / 2;
    $('video').height(ht);
    $('video').width(wd);
    $('#dialogDiv').dialog('open');
    $('#dialogDiv').dialog({
      title: title,
      height: 'auto',
      width: 'auto'
    });
  });
  $("#dialogDiv").dialog({
    autoOpen: false,
    modal: true,
    minWidth: 500,
    minHeight: 300,
    open: function() {
      $('.ui-widget-overlay').bind('click', function() {
        $('#dialogDiv').html('');
        $('#dialogDiv').dialog('close');

      });
    }
  });

  setInterval(function() {
    $('a[href] div').each(function() {
      var dure = $(this).find('video').get(0).duration;
      var minutes = parseInt(dure / 60, 10);
      var seconds = Math.round(dure % 60, 2);
      //console.log(minutes+':'+seconds+' min');
      $(this).parent().children('span').html(minutes + ':' + seconds + ' min');
    });
  }, 500);
});
a.wmBox {
  width: 150px;
  height: 150px;
  float: left;
  margin: 5px;
  position: relative;
}
a.wmBox img {
  width: 150px;
  height: 150px;
}
.hide {
  display: none;
}
img {
  width: 250px;
  height: 250px;
}
.size {
  position: absolute;
  top: 0px;
  right: 0px;
  width: auto;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialogDiv"></div>
<a class="wmBox" id="dm" href="#">
  <img src='http://media.w3.org/2010/05/sintel/poster.png' />
  <span class="size"></span>
  <div id="dia_mes" title="Ninja" class='hide'>
    <video preload='metadata' class='vidBox' controls>
      <source src='http://media.w3.org/2010/05/sintel/trailer.mp4'>
    </video>
  </div>
</a>
<a class="wmBox" id="dm1" href="#">
  <img src='http://media.w3.org/2010/05/bunny/poster.png' />
  <span class="size"></span>
  <div id="dia_mes1" title="Bunny" class='hide'>
    <video preload='metadata' class='vidBox' controls>
      <source src='http://media.w3.org/2010/05/bunny/trailer.mp4
'></source>
    </video>
  </div>
</a>

2 个答案:

答案 0 :(得分：0)

调用.dialog({})重新初始化小部件：

$('#dialogDiv').dialog({
  title: title,
  height: 'auto',
  width: 'auto'
});

改为使用选项方法，https://api.jqueryui.com/dialog/#method-option：

$('#dialogDiv').dialog('option', {
  title: title,
  height: 'auto',
  width: 'auto'
});

＆＃13;
＆＃13; 
$(function() {
  $(document).on('click', '.wmBox', function(ev) {
    ev.preventDefault();
    //console.log($(this).children());
    var data = $(this).children('div').attr('id');
    var title = $(this).children('div').attr('title');
    //console.log(data + '----' + title);
    $('#' + data).show();
    $('#' + data).appendTo('#dialogDiv').removeClass('hide');
    ht = $(document).height() / 2;
    wd = $(document).width() / 2;
    $('video').height(ht);
    $('video').width(wd);
    $('#dialogDiv').dialog('open');
    $('#dialogDiv').dialog('option', {
      title: title,
      height: 'auto',
      width: 'auto'
    });
  });
  $("#dialogDiv").dialog({
    autoOpen: false,
    modal: true,
    minWidth: 500,
    minHeight: 300,
    open: function() {
      $('.ui-widget-overlay').bind('click', function() {
        $('#dialogDiv').html('');
        $('#dialogDiv').dialog('close');

      });
    }
  });

  setInterval(function() {
    $('a[href] div').each(function() {
      var dure = $(this).find('video').get(0).duration;
      var minutes = parseInt(dure / 60, 10);
      var seconds = Math.round(dure % 60, 2);
      //console.log(minutes+':'+seconds+' min');
      $(this).parent().children('span').html(minutes + ':' + seconds + ' min');
    });
  }, 500);
});
＆＃13; 
a.wmBox {
  width: 150px;
  height: 150px;
  float: left;
  margin: 5px;
  position: relative;
}
a.wmBox img {
  width: 150px;
  height: 150px;
}
.hide {
  display: none;
}
img {
  width: 250px;
  height: 250px;
}
.size {
  position: absolute;
  top: 0px;
  right: 0px;
  width: auto;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
}
＆＃13; 
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialogDiv"></div>
<a class="wmBox" id="dm" href="#">
  <img src='http://media.w3.org/2010/05/sintel/poster.png' />
  <span class="size"></span>
  <div id="dia_mes" title="Ninja" class='hide'>
    <video preload='metadata' class='vidBox' controls>
      <source src='http://media.w3.org/2010/05/sintel/trailer.mp4'>
    </video>
  </div>
</a>
<a class="wmBox" id="dm1" href="#">
  <img src='http://media.w3.org/2010/05/bunny/poster.png' />
  <span class="size"></span>
  <div id="dia_mes1" title="Bunny" class='hide'>
    <video preload='metadata' class='vidBox' controls>
      <source src='http://media.w3.org/2010/05/bunny/trailer.mp4
'></source>
    </video>
  </div>
</a>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

最后我通过做一些调试和研究来解决这个问题。

jQuery(document).ready(function() {
		jQuery(document).on('click','a[href]',function(ev){
		ev.preventDefault();
		var data = jQuery(this).children('div').attr('id');
		var title = jQuery(this).children('div').attr('title');
		jQuery('#' + data).appendTo('#dialogDiv').removeClass('hide');
		ht = $(document).height()/2;
		wd = $(document).width()/2;
		vidht = (ht*3)/4;
		vidwd = (wd*3)/4;
		$('video').height(vidht);
		$('video').width(vidwd);
		jQuery('#dialogDiv').data('link', $(this).attr('id')).dialog('open');
		jQuery('#dialogDiv').dialog('option',{
			title: title,
			height: ht,
			width: wd
		});
	});
	    jQuery("#dialogDiv").dialog({
        autoOpen: false,
        modal: true,
        minWidth: 500,
        minHeight: 300,
        open: function(){
		var id = $(this).data('link');
			jQuery('.ui-widget-overlay').data('aid', id).bind('click',function(){
				var id = $(this).data('aid');
				var ret_data = $(this).parent().find('#dialogDiv').html();
				var ret_id = $(ret_data).attr('id');
				var title= $(ret_data).attr('title');
				jQuery('.wmBox#'+id).append('<div id="'+ret_id+'" title="'+title+'">'+$("#"+ret_id).html()+'</div>');
				if(jQuery('.wmBox#'+id).children('div').find(ret_id))
				{
					jQuery('#'+ret_id).addClass("hide");
				}
				jQuery('#dialogDiv').html('');
                jQuery('#dialogDiv').dialog('close');
			});
        }
    });
    
setInterval(function(){
      jQuery('a[href] div').each(function(){
      var dure= jQuery(this).find('video').get(0).duration;
          var minutes = parseInt(dure / 60, 10);
          var seconds = Math.round(dure % 60, 2);
          jQuery(this).parent().children('span').html(minutes+':'+seconds+' min');
      });			
    },500);
});
a.wmBox {width: 250px; height: 250px;float: left; margin: 5px; position: relative;}
	a.wmBox img {width: 250px; height: 250px;}
.hide {
  display: none;
}
img {width: 250px; height: 250px;}
.size{ position: absolute; top: 0px; right: 0px; width: auto; 
	       background: rgba(0,0,0,0.6);
	       color: #fff; font-weight: bold;
	       }
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialogDiv"></div>
 <a class="wmBox" id="dm" href="#" data-popup="vendor_reg.mp4">
			<img src='http://media.w3.org/2010/05/sintel/poster.png' />	
			<span class="size"></span>
		<div id="dia_mes" title="Ninja" class='hide'>
<video preload='metadata' class='vidBox' controls>
  <source src='http://media.w3.org/2010/05/sintel/trailer.mp4'>
</video>
  </div>
</a>
<a class="wmBox" id="dm1" href="#">
  <img src='http://media.w3.org/2010/05/bunny/poster.png' />
  <span class="size"></span>
  <div id="dia_mes1" title="Bunny" class='hide'>
<video preload='metadata' class='vidBox' controls>
  <source src='http://media.w3.org/2010/05/bunny/trailer.mp4
'></source>
</video>
  </div>
</a>

相关问题
最新问题