javascript - 附加元素上的getelementbyid

Question

var track_url = data.result;

SC.get('/resolve', {
    url: track_url
}, function(track) {
    console.log(track.id);
    $('#player').append('<iframe id="soundcloud_widget"  src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + track.id + '&show_artwork=true&liking=true&sharing=true&auto_play=true"  width="1280"  height="720"   frameborder="no"></iframe>');
    var q = $('#player').get(0);
    console.log(q);
    var widget = SC.Widget(document.getElementById('soundcloud_widget'));
    widget.bind(SC.Widget.Events.READY, function() {
        console.log("test1");
    });
    widget.bind(SC.Widget.Events.FINISH, function() {
        console.log("test2");
    });
});

我正在使用此代码在页面上动态嵌入soundcloud播放器。每次请求新歌曲时，它都会删除之前的play div元素，并将其重新添加到HTML中，以便您播放新歌曲。我的YouTube API可以使用此功能，但无法将它用于soundcloud。事件不会触发。我在这条线上出现错误:

var widget = SC.Widget(document.getElementById('soundcloud_widget'));

错误是:

Uncaught TypeError: undefined is not a function ?n=2071:211(anonymous function) ?n=2071:211(anonymous function) sdk.js:1request.onreadystatechange sdk.js:1

现在，我相信会发生此错误，因为当我添加新的iframe时，不会更新DOM数据，因此不会通过“getelementbyid”找到“soundcloud_widget”元素。不幸的是，据我所知。

Answer 1

 var track_url = data.result;

SC.get('/resolve', {
    url: track_url
}, function(track) {
    console.log(track.id);
    $('#player').append('<iframe id="soundcloud_widget"  src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + track.id + '&show_artwork=true&liking=true&sharing=true&auto_play=true"  width="1280"  height="720"   frameborder="no"></iframe>');
    var q = $('#player').get(0);
    console.log(q);

    var element = $('#soundcloud_widget');
    var widget = SC.Widget(element);
    widget.bind(SC.Widget.Events.READY, function() {
        console.log("test1");
    });
    widget.bind(SC.Widget.Events.FINISH, function() {
        console.log("test2");
    });
});

尝试吐元素的获取

var element = $('#soundcloud_widget');

并使用元素

var widget = SC.Widget(element);

这应该给您更好的错误。