我用 jQuery 为 html5 音频 api 制作了一个滑块和自定义音频控件，一切都很好，直到我决定用 ajax (jQuery) 加载整个东西。
突然所有的功能都停止工作了。我发现这些函数仍然被触发，但几乎每个 jQuery .css 调用（这是正确的术语吗？）都不再工作了。
经过大量试验和错误后，我发现了问题所在：id 选择器。我将所有 id 选择器从动态加载的内容更改为类，一切又开始工作了。
所以我在这里 - 很高兴我可以解决问题，但仍然好奇为什么会这样？
根据要求，这里是我的代码的一部分：
jQuery Ajax 调用：
function loadcontent() {
var contenttype;
contenttype = window.location.hash.substring(2);
jQuery.ajax({
type: 'POST',
dataType: 'json',
url: ajax_object.ajaxurl,
data: {
'action': 'content_get',
'contenttype': contenttype
},
success: function(data){
jQuery('#contentcontainer').html(data);
document.title = contenttype;
jQuery('.contentmenuitem[data-contenttype=' + contenttype + ']').siblings(".contentarrow").css({'display':'inline-block'});
},
complete: function(){
scrollbarinit();
audiocontrols();
audiocontent();
pdfcontent();
slider();
}
});
}
处理ajax请求的php函数：
add_action('wp_ajax_content_get', 'loadcontentdata');
add_action('wp_ajax_nopriv_content_get', 'loadcontentdata');
function loadcontentdata() {
$contenttype = $_POST['contenttype'];
if ($contenttype === 'contentslider') {
echo json_encode(contentslider());
}
else {
echo json_encode(get_field($contenttype, 5));
};
die();
}
php contentslider() 函数的一部分：
function contentslider() {
$cfieldnumber = count(get_fields(5));
$fields = get_fields(5);
$allcontent = array();
$firstpart = /* removed for better readability */
$secondpart = '<div class="audioplayercontainer">
<!--[if IE 9]> <audio id="audioplayer" controls="controls"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <audio id="audioplayer"> <!--<![endif]-->
<!--<audio id="audioplayer">-->
<source id="mp3_src" src="" type="audio/mp3"></source>
<!--<source id="oog_src"src=" ?>" type="audio/oog">-->
Your browser does not support HTML5 audio.
</audio>
<div class="audiocontrols">
<div class="play audiobuttons">
<div class="playsymbol"></div>
</div>
<div class="pause audiobuttons">
<div class="pausesymbol"></div>
</div>
<div class="timelinecontainer">
<div class="timeelapsed">
</div>
<div class="timethumb">
</div>
<input type="range" class="timeline" name="timeline" value="0" step="0.1" min="0" max="variable">
</div>
<div class="timer">
</div>
<div class="mute audiobuttons">
<div class="mutesymbol"></div>
<div class="mutedsymbol"></div>
</div>
<div class="volumecontainer">
<div class="volumethumb">
</div>
<input type="range" class="volume" name="volume" value="100" min="0" max="100">
</div>
</div>
</div> <!--audioplayercontainer-->'
/* removed for better readability */
$lastpart = /* removed for better readability */
foreach( $fields as $field_name => $value )
{
$field = get_field_object($field_name, 5);
if ($field['instructions'] === 'mp3') {
$trackar = $field['value'];
$logoid = get_field('oe1_logo', 5);
$logosrc = wp_get_attachment_image_src( $logoid['id'] , 'contentslidertracklogo' );
$allcontent[] = '<div id="track' . $i . '" data-fieldname="' . $field['name'] . '" class="slideritem tracks ">
<img src="' . $logosrc[0] . '" width="' . $logosrc[1] .'" height="' . $logosrc[2] . '">
<div class="slideritemmeta">
<h3 class="slideritemcaption">' . $trackar['caption'] . ' </h3>
<p class="slideritemdescription">' . $trackar['description'] . '</p>
</div>
<div class="spinner"><div class="spinnerinner"></div></div>
</div>';
}
elseif ($field['instructions'] === 'article_tn') {
$imgid = $field['value'];
$tnsrc = wp_get_attachment_image_src( $imgid['id'] , 'contentsliderarticle' );
$allcontent[] =
'<div class="slideritem article" data-fieldname="' . $field['name'] . '">
<img src="' . $tnsrc[0] . '" width="' . $tnsrc[1] .'" height="' . $tnsrc[2] . '">
<div class="slideritemmeta">
<h3 class="slideritemcaption">' . $imgid['caption'] . ' </h3>
<p class="slideritemdescription">' . $imgid['description'] . '</p>
</div></div>';
}
};
return $firstpart . join("",$allcontent) . $secondpart . $lastpart;
}
这里是 Audiocontrols 的 jQuery 函数：
function audiocontrols() {
var player = document.getElementById('audioplayer');
var timeline = document.getElementsByClassName('timeline');
var volume = document.getElementsByClassName('volume');
var duration;
var durationrounded;
var durationmin;
var durationsec;
var interval;
var elapsed;
var elapsedrounded
var minsec;
var minutes = 0;
var seconds = 0;
var volumethumbpos;
var volpos;
var timepos;
var timethumbpos;
jQuery(player).on('canplay', function(){
duration = player.duration;
durationrounded = Math.round(duration);
durationmin = Math.floor(durationrounded / 60);
durationsec = durationrounded - (durationmin * 60);
jQuery(timeline).attr('max', duration);
jQuery('.timer').html(minutes + ':' + seconds + ' | ' + durationmin + ':' + durationsec);
jQuery('.play').css({'display':'none'});
jQuery('.pause').css({'display':'inline-block'});
jQuery('.spinner').css({'display':'none','animation':''});
jQuery('.audioplayercontainer').css({'display':'block','opacity':'1'});
});
jQuery(player).on('play', function(){
interval = setInterval(function(){
elapsed = player.currentTime;
timepos = elapsed/(duration/100);
timethumbpos = ((Math.round(timepos))/100)*90;
jQuery('.timethumb').css({'left': timethumbpos + '%'});
jQuery('.timeelapsed').css({'width': timethumbpos + '%'});
elapsedrounded = Math.round(elapsed);
minutes = Math.floor(elapsedrounded / 60);
seconds = elapsedrounded - (minutes * 60);
jQuery('.timer').html(minutes + ':' + seconds + ' | ' + durationmin + ':' + durationsec);
jQuery(timeline).val(elapsed);
}, 100);
jQuery(player).on('pause', function(){
clearInterval(interval);
});
});
jQuery(volume).on('mousedown', function() {
volinterval = setInterval(function(){
volpos = jQuery(volume).val();
player.volume = volpos/100;
volumethumbpos = (volpos/100)*90;
jQuery('.volumethumb').css({'left': volumethumbpos + '%'});
}, 10);
jQuery(volume).on('mouseup', function() {
clearInterval(volinterval);
});
});
jQuery('.mute').on('click', function() {
player.volume = 0;
jQuery(volume).val(0);
jQuery('.volumethumb').css({'left': '0%'});
});
jQuery('.play').on('click', function(){
jQuery('.pause').css({'display':'inline-block'});
jQuery('.play').css({'display':'none'});
player.play();
});
jQuery('.pause').on('click', function(){
jQuery('.play').css({'display':'inline-block'});
jQuery('.pause').css({'display':'none'});
player.pause();
});
jQuery(timeline).on('mousedown', function(){
player.pause();
timelineinterval = setInterval(function(){
elapsed = jQuery(timeline).val();
player.currentTime = elapsed;
timepos = elapsed/(duration/100);
timethumbpos = ((Math.round(timepos))/100)*90;
jQuery('.timethumb').css({'left': timethumbpos + '%'});
jQuery('.timeelapsed').css({'width': timethumbpos + '%'});
elapsedrounded = Math.round(elapsed);
minutes = Math.floor(elapsedrounded / 60);
seconds = elapsedrounded - (minutes * 60);
jQuery('.timer').html(minutes + ':' + seconds + ' | ' + durationmin + ':' + durationsec);
}, 10);
jQuery(timeline).on('mouseup', function() {
clearInterval(timelineinterval);
player.play();
});
});
}
抱歉发布这么多代码。如您所见，我用类替换了音频控件的所有 ID，以使该功能audiocontrols()正常工作。也许有人可以告诉我为什么我必须这样做才能使功能正常工作。