jqueryajax动态加载内容&x27；s id选择器不使用JQuery.css

我用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（）

正常工作，我用类替换了audiocontrols的所有ID。也许有人能告诉我为什么我必须这样做才能让函数工作

没有太多/任何意义…你能发布你的代码吗？好的，我发布了我的代码，也许有人能帮我理解

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();
});
});


}