Ajax如何加载一些脚本
Posted
技术标签:
【中文标题】Ajax如何加载一些脚本【英文标题】：Ajax how to load some scripts 【发布时间】：2016-08-27 16:48:54 【问题描述】：我有以下代码，根据信息的跨度多少，加载到未编辑的列表内容：
$(document).on('click','#addplaylisttolist',function()
myPlaylist.pause();
myPlaylist.remove();
$("#playlist_selected_songs").empty();
$.each($(this).find("span"),function()
$("#playlist_individual_li").load('listen_playlist_section_content_item_add',musicId:$(this).attr('data-id-music'),musicTitle:$(this).attr('data-title'),musicArtist:$(this).attr('data-artist'),musicFile:$(this).attr('data-mp3'),musicPoster:$(this).attr('data-poster'),musicTime:$(this).attr('data-time-music'),function()
$("#playlist_selected_songs").append($("#playlist_individual_li").html());
);
);
myPlaylist.play();
);
将构建播放列表的代码：
<div class="m-t-n-xxs item pos-rlt">
<div class="top text-right">
<span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
<span class="bar1 a3 lter"></span>
<span class="bar2 a5 lt"></span>
<span class="bar3 a1 bg"></span>
<span class="bar4 a4 dk"></span>
<span class="bar5 a2 dker"></span>
</span>
</div>
<div id="playlist_owner_info" class="bottom gd bg-info wrapper-lg">
<span id="playlist_owner_info_followers" class="pull-right text-sm">
$item.profile_jrFollower_item_count
<br>
Followers
</span>
<span id="playlist_owner_info_name" class="h2 font-thin">
$item.profile_name
</span>
</div>
jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" id="playlist_owner_img" class="img-full halfwidth" item_id=$item.profile_id size="medium" crop="height"
</div>
<ul id="playlist_selected_songs" class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
$playlist = json_decode($item.playlist_list,true)
foreach $playlist as $id => $position
foreach $position as $id1 => $position1
jrCore_list module="jrAudio" search="_item_id in `$id1`" template="listen_playlist_section_content_item.tpl"
/foreach
/foreach
</ul>
<li id="playlist_individual_li" style="display: none;"></li>
中间 div 的代码，其中有播放列表列表，以及顶部脚本使用的 id 为“addplaylisttolist”的锚点：
jrCore_module_url module="jrPlaylist" assign="purl"
if isset($_items)
foreach from=$_items key="module" item="item"
<li class="list-group-item clearfix">
<a id="addplaylisttolist" class="jp-play-me pull-right m-t-sm m-l text-md">
$playlist = json_decode($item.playlist_list,true)
foreach $playlist as $id => $position
foreach $position as $id1 => $position1
jrCore_list module="jrAudio" search="_item_id in `$id1`" template="listen_playlist_item.tpl"
/foreach
/foreach
<i class="icon-control-play text" style="cursor:pointer;"></i>
</a>
<script>
$(document).ready(function()
$(document).on('click','#addplaylisttolist',function()
$("#playlist_owner_img").attr('src','http://site.fm/profile/image/profile_image/$item.profile_id/medium/crop=height/_v=1456534488');
$("#playlist_owner_info_followers").html("$item.profile_jrFollower_item_count<br>Followers");
$("#playlist_owner_info_name").html("$item.profile_name");
);
);
</script>
...
</li>
/foreach
/if
ID 为“addplaylisttolist”的主播将拥有与相关播放列表中的音乐一样多的跨度信息：
jrCore_module_url module="jrAudio" assign="murl"
if isset($_items)
foreach $_items as $item
<span id="artistitem" data-id-music="$item._item_id" data-time-music="$item.audio_file_length" data-title="$item.audio_title" data-artist="$item.audio_file_artist" data-mp3="$jamroom_url/$murl/stream/audio_file/$item._item_id/key=[jrCore_media_play_key]/file.mp3" data-poster="$jamroom_url/$murl/image/audio_image/$item._item_id/large" data-path="$jamroom_url/$item.profile_url/$murl/$item._item_id/$item.audio_title_url">
</span>
/foreach
/if
最后，问题是我用来构造每个单独的 li 的模板（由顶部的脚本使用）如下：
<li class="list-group-item">
<div class="pull-right m-l">
<span class="addtolistbutton">
jrCore_module_function function='jrPlaylist_button' playlist_for='jrAudio' item_id=$musicId class='circleplus_icon_playlist' title='Add To Playlist'
</span>
if jrUser_is_logged_in()
<a href="" id="listen_playlist_delete_item" title="delete music"><i class="icon-close"></i></a>
/if
literal
<script type="text/javascript">$(function() var switchTo5x=true;);</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">$(function() stLight.options( publisher: "123456789-91211-121314-121617-181920212223242526", doNotHash: false, doNotCopy: false, hashAddressBar: false););</script>
<span class='st_sharethis_large' displayText='ShareThis'></span>
/literal
</div>
<a href="" class="addplaylistmusic jp-play-me m-r-sm pull-left" data-title="$musicTitle" data-artist="$musicArtist" data-mp3="$musicFile" data-m4a="$musicFile" data-poster="$musicPoster">
<i class="icon-control-play text"></i>
<i class="icon-control-pause text-active"></i>
</a>
<div class="clear text-ellipsis">
<a href="$(this).attr('data-path')"><span>
$musicTitle
</span></a>
<span class="text-muted"> --
$musicTime
</span>
</div></li>
可以看出，那里有脚本。将 ajax 与该脚本一起使用是行不通的。有谁知道我可以使它工作的方法？谢谢。
一个具体的例子：
<a id="addplaylisttolist" class="jp-play-me pull-right m-t-sm m-l text-md">
<!-- BEGIN wmMusic/listen_playlist_item.tpl -->
<span id="artistitem" data-id-music="50" data-time-music="00:02:48" data-title="09 Skin To Bone" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/50/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/50/large" data-path="http://site.fm/userdemo1/audio/50/09-skin-to-bone">
</span>
<!-- END wmMusic/listen_playlist_item.tpl -->
<!-- BEGIN wmMusic/listen_playlist_item.tpl -->
<span id="artistitem" data-id-music="49" data-time-music="00:01:51" data-title="07 Victimized" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/49/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/49/large" data-path="http://site.fm/userdemo1/audio/49/07-victimized">
</span>
<!-- END wmMusic/listen_playlist_item.tpl -->
<i class="icon-control-play text" style="cursor:pointer;"></i>
</a>
并在左侧出现：
<ul id="playlist_selected_songs" class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto"><!-- BEGIN wmMusic/listen_playlist_section_content_item_add.tpl -->
<li class="list-group-item">
<div class="pull-right m-l">
<span class="addtolistbutton">
<!-- BEGIN jrPlaylist/playlist_button.tpl -->
<div style="display: inline-block;" id="playlist_button_jrAudio_50">
<a onclick="jrPlaylist_select('50','jrAudio',null)" title="add to playlist"><link rel="stylesheet" property="stylesheet" href="http://site.fm/core/icon_css/32?_v=1462732449"><span class="sprite_icon sprite_icon_32"><span class="sprite_icon_32 sprite_icon_32_img sprite_icon_32_music"> </span></span></a>
<div id="playlist_jrAudio_50" class="overlay playlist_box" style="position: absolute;
margin-left: auto;
margin-right: auto;
left: 0px;
right: 0px;"><!-- playlist loads here --></div>
</div>
<!-- END jrPlaylist/playlist_button.tpl -->
</span>
<a href="" id="listen_playlist_delete_item" title="delete music"><i class="icon-close"></i></a>
<div id="test"></div>
</div>
<a href="" class="addplaylistmusic jp-play-me m-r-sm pull-left" data-title="09 Skin To Bone" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/50/key=1/file.mp3" data-m4a="http://site.fm/audio/stream/audio_file/50/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/50/large">
<i class="icon-control-play text"></i>
<i class="icon-control-pause text-active"></i>
</a>
<div class="clear text-ellipsis">
<a href="$(this).attr('data-path')"><span>
09 Skin To Bone
</span></a>
<span class="text-muted"> --
00:02:48
</span>
</div></li>
<!-- END wmMusic/listen_playlist_section_content_item_add.tpl --><!-- BEGIN wmMusic/listen_playlist_section_content_item_add.tpl -->
<li class="list-group-item active">
<div class="pull-right m-l">
<span class="addtolistbutton">
<!-- BEGIN jrPlaylist/playlist_button.tpl -->
<div style="display: inline-block;" id="playlist_button_jrAudio_49">
<a onclick="jrPlaylist_select('49','jrAudio',null)" title="add to playlist"><link rel="stylesheet" property="stylesheet" href="http://site.fm/core/icon_css/32?_v=1462732449"><span class="sprite_icon sprite_icon_32"><span class="sprite_icon_32 sprite_icon_32_img sprite_icon_32_music"> </span></span></a>
<div id="playlist_jrAudio_49" class="overlay playlist_box" style="position: absolute;
margin-left: auto;
margin-right: auto;
left: 0px;
right: 0px;"><!-- playlist loads here --></div>
</div>
<!-- END jrPlaylist/playlist_button.tpl -->
</span>
<a href="" id="listen_playlist_delete_item" title="delete music"><i class="icon-close"></i></a>
<div id="test"></div>
</div>
<a href="" class="addplaylistmusic jp-play-me m-r-sm pull-left active" data-title="07 Victimized" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/49/key=1/file.mp3" data-m4a="http://site.fm/audio/stream/audio_file/49/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/49/large">
<i class="icon-control-play text"></i>
<i class="icon-control-pause text-active"></i>
</a>
<div class="clear text-ellipsis">
<a href="$(this).attr('data-path')"><span>
07 Victimized
</span></a>
<span class="text-muted"> --
00:01:51
</span>
</div></li>
<!-- END wmMusic/listen_playlist_section_content_item_add.tpl --></ul>
【问题讨论】：
您的具体问题是什么？从你的问题我可以得到问题是什么以及js和html是如何相关的，因为你指的是不在你的html中的ids。
@Uzbekjon 我添加了更多代码以使其易于理解。谢谢。
@Nmaster88 我们需要的是 html 输出，而不是视图模板。
@Hors Sujet 如果你说的是一个例子，我加了一个。
@Nmaster88 查看我的回答，但我们需要更多信息来帮助您。
【参考方案1】：
添加内容后（在您的ajax success callback function definition 中），调用：
stButtons.locateElements();
见：
How to dynamically create "Share This buttons" with a custom URLs with a javascript function? Sharethis button does not work on pages loaded via ajax【讨论】：
但我仍然缺少一些代码来使用它。我需要使用什么代码？谢谢 当您使用 ajax 函数加载 site.com/listen 时。在成功回调的末尾添加这一行。【参考方案2】：我认为您希望能够调用动态添加的脚本标签中的脚本函数。对吗？
您可以尝试以下方法：
A) 尝试使用全局脚本函数并在脚本标签中调用它们（我不确定 $function() 的作用）。 B) 在函数中，尝试调用调试警报（'debug'）。这可以帮助您查看函数是否正在被调用。 C) 何时调用脚本函数？应用程序可能会在脚本完全加载之前尝试调用函数（使用选项 A 将有助于解决此问题）。另一种方法是在调用其中的内容之前以某种方式确保脚本已加载。 D) 对于包含http://w.sharethis.com/button/buttons.js 的脚本，你不能直接在页面顶部加载而不是像这样动态加载吗？【讨论】：
以上是关于Ajax如何加载一些脚本的主要内容，如果未能解决你的问题，请参考以下文章
Yii: 如何在CGridView通过Ajax方式刷新数据后执行JS脚本