JQuery: элементы, добавленные замены() не являются интерактивными, даже с .on()

Question

Я пытаюсь использовать .Привернуть создать несколько пролетов, которые я могу нажать позже:

mytext.replace("someword","<span class='clickme'>someword</span>") 

Это делает правильно создайте промежутки, но я не могу заставить их запускать события jQ. Я пробовал:

$(document).on("click",".clickme",function(){ 
    alert("meow") 
}) 

Но это также не работает, похоже, что я чего-то не хватает. Благодаря!

Answer 1

Он должен работать, если вы повторно заменить текст в элемент, из которого вы взяли пробы текст :)

var mytext = $('p').text(), 
 
    changes = mytext.replace("someword","<span class='clickme'>someword</span>"); 
 

 
$('p').html(changes); 
 

 
$(document).on("click",".clickme",function(){ 
 
    alert("meow"); 
 
})

.clickme{ 
 
    background: #f00; 
 
    color: #fff; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<p>Lorem ipsum dolor someword sit amet</p>

Answer 2

JSBIN http://jsbin.com/hejefayebi/1/edit?html,js,output

Ну, что происходит в том, что вы не добавляете замененный текст как html на страницу.

Посмотрите, когда вы используете функцию «replace» строкового объекта, вы манипулируете текстом, только текст text replace function возвращает новую строку с управляемым текстом, вам нужно вставить этот текст в html как-то.

т.е. если заменить Foo в следующем тексте:

var justText = "Hi I'm foo"; // Just some text 
// First the replace function returns a new string, it does not modify the original string, so you have to reassign the value 
justText = justText.replace("foo", "<span>foo</span>"); // replace will return "Hi I'm <span>foo</span>", but you need to assign it. 
// Assign the text to a paragraph 
var p = document.getElementById("paragraph"); 
// Then because you want to insert new HTML DOM elements into an existing element 
// you have to use either the "innerHTML" property of HTML elements, or the "html" jQuery function (which use innerHTML internaly); 
p.innerHTML = justText; // Once you have inserted the DOM elements, the click bindings will be attached.