divの子要素にそのID内の文字列が含まれている場合に関数をトリガする方法はありますか？

Question

私は、特定の子要素に、関数で指定された文字列が少なくとも1つ含まれている場合に、特定の動作をトリガしようとしていました。私が使用しているコードは次のとおりです。

<div id="myDIV" class="mystyle"> 
<script> /*some script goes here*/ </script> 
<div id="asdkmasdp_123123"> 
<!--This DIV was created dynamically (not always) by the script before --> 
Contingent DIV 
</div> 
</div> 

<script> 
function myFunction(){ 
if($("#myDIV").find("div[id*='masdp']").length)(function(){ 
    alert("This works!"); 
    }); 
} 
myFunction(); 
</script> 

この例では、子DIVが常に存在するとは限りません（「スクリプト」のみです）。それが何かをトリガーしたいと思うとき、この場合はブラウザー警告です。

私は、ページの読み込みが終了したときにDOM内にないDIVの子に制限されているため、ユーザーのやりとり後にしか使用できません。

また、子DIVのIDとクラスは、作成されるたびに異なります。注：このDIVを作成するサードパーティJSにアクセスすることはできません。その#myDivコンテナのみにアクセスしてください。

Answer 1

あなたは#myDiv上subtreeとchildListの変更を監視し、そのコールバックでeeementを確認するためにMutationObserverを使用することができます。

// Set up the observer 
 
var ob = new MutationObserver(function() { 
 
    // See if it exists now 
 
    if ($("#myDiv [id*='masdp']").length) { 
 
    console.log("Found it!"); 
 
    } 
 
}); 
 
ob.observe($("#myDiv")[0], { 
 
    childList: true, 
 
    subtree: true 
 
}); 
 

 
// Randomly add the element later 
 
setTimeout(function() { 
 
    $("#myDiv").append(
 
    "<span id='masdpxxx'>masdp</span>" 
 
); 
 
}, Math.floor(Math.random() * 1000) + 200);

<div id="myDiv"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

私はMutationObserverが、ここで必要とされていないと思いますが、簡単な間隔で十分にフィットします。

デモ：

<div id="myDiv"></div> 

JSコードを指定されたIDを持つdiv要素が存在するかどうかを確認するために：私たちは見ているだろうしているhttps://jsfiddle.net/cdbwy6Lj/3/

HTMLのdiv

// Add text after 2 seconds to "sample" div 
setTimeout(function() { 
    $('#myDiv').append('<div id="asdkmasdp_123123">hello world!</div>'); 
}, 2000); 

// Cache handler to element 
var el = $('#myDiv'); 

// Check every one second if div content contains phrase "world!" 
var check = function() { 
    if (el.find("[id*='masdp']").length) { 
     alert('It works!'); 
     console.log('It works!'); 
    } else { 
     setTimeout(check, 1000); 
    } 
}; 
check();