使用替換時保留事件數據使用替換

Question

我試圖保留事件數據時更換div與replaceWith（）。當我嘗試它時找不到事件。目前我使用PostMessage的調用消息事件列表器來替換腳本潛水裏面的元素（用於在不被調用的消息事件）

// Create IE + others compatible event handler 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
// Listen to message from child window 

eventer(messageEvent,function(e) { 
    console.log('origin: ', e.origin); 

    // Check if origin is proper 
    if(e.origin != 'http://domain.com' || e.origin != 'http://www.domain.com'){ return } 
    console.log('revieced message: ', e.data); 
    player.Resume({ uuid: e.data.rid, title: e.data.rtitle });      

    var script = document.createElement('script'); 
    script.text = "player.ready(function() { player.ima(adOptions);player.ima.requestAds(); window.SubtitlesOctopusOnLoad = function() { var options = { video: player.tech_.el_, subUrl: e.data.subtitleUrl || '<?php echo WEB_ROOT; ?>/files/<?php echo validation::safeOutputToScreen($file->subtitle); ?>', availableFonts: fonts, workerUrl: '<?php echo PLUGIN_WEB_ROOT; ?>/mediaplayer/assets/players/videojs/worker.js'};window.octopusInstance = new SubtitlesOctopus(options); window.octopusInstance.resize();}; if (SubtitlesOctopus) { SubtitlesOctopusOnLoad(); } });"; 

    $('#subtitles').replaceWith(script);       

}, false);                     

的script.text包含了我想要的數據保留 「e.data.subtitleUrl」

Answer 1

UPDATE

我已經做出了表率。你可以檢查它。

$('#click-div').click(function(e){ 
 
\t var script = document.createElement('script'); 
 
    script.text = 'alert($("#added-script").data("subtitleUrl"));' 
 
    script.dataset.subtitleUrl = 'Hold the data'; 
 
    script.setAttribute('id', 'added-script'); 
 
    $('#element-to-replace').replaceWith(script); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='click-div'> 
 
    Click 
 
</div> 
 
<div id='element-to-replace'></div>

我添加的ID在函數創建script元素。

你可以試試data()方法來保存你的數據。

eventer(messageEvent,function(e) { 
    console.log('origin: ', e.origin); 

    // Check if origin is proper 
    if(e.origin != 'http://domain.com' || e.origin != 'http://www.domain.com'){ return } 
    console.log('revieced message: ', e.data); 
    player.Resume({ uuid: e.data.rid, title: e.data.rtitle });      

    var script = document.createElement('script'); 
    script.text = "player.ready(function() { player.ima(adOptions);player.ima.requestAds(); window.SubtitlesOctopusOnLoad = function() { var options = { video: player.tech_.el_, subUrl: $('#added-script').data('subtitle-url') || '<?php echo WEB_ROOT; ?>/files/<?php echo validation::safeOutputToScreen($file->subtitle); ?>', availableFonts: fonts, workerUrl: '<?php echo PLUGIN_WEB_ROOT; ?>/mediaplayer/assets/players/videojs/worker.js'};window.octopusInstance = new SubtitlesOctopus(options); window.octopusInstance.resize();}; if (SubtitlesOctopus) { SubtitlesOctopusOnLoad(); } });"; 
    script.dataset.subtitleUrl = e.data.subtitleUrl; 
    script.setAttribute('id', 'added-script'); 
    $('#subtitles').replaceWith(script);       

}, false); 

然後你可以通過$('#added-script').data('subtitle-url')得到subtitleUrl。