2015-12-11 4 views
0

У меня есть блок непомеченного текста в div. Я хочу проанализировать текст и заменить определенные ключевые слова новыми элементами формы, которые включают обработчики. Одним из примеров является то, что когда я вижу текст «Дата: ________», я хочу заменить его новым полем ввода, дать ему уникальный идентификатор и приложить к нему обработчик .datepicker()..replace() произвольный текст с новым элементом DOM

Данный образец текста:

* Lorem Ipsum боль сидеть Амет, consectetur adipiscing Элит, СЭД сделать eiusmod TEMPOR incididunt ут Лаборе и др Dolore магна aliqua. Дата: ________ ________ ________ ________............................... *

Я попытался следующие:

$("#textdiv").replace(/Date:________/g, "<input type='text' id='textid_123'/>"); 
$("#textid_123").datepicker(); 

И в то время как он создает поле ввода, он не придает обработчик DatePicker(). Меня это не удивляет, и я предполагаю, что JQuery не знает о модификации DOM.

Если моя «дата» была завернута в тег или другой тег, это было бы тривиально. Есть ли способ заменить обычный текст новыми элементами DOM, которые видны JQuery?

+0

См. [«Если вопросы включают« теги »в их названиях?»] (Http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), где консенсус «нет, они не должны»! –

+1

Этот код действительно создает поле ввода? Объекты jQuery не имеют метода «replace», поэтому я не понимаю, как ваш код не вызывает ошибку. Вы используете библиотеку, которая предоставляет метод «replace»? – apsillers

ответ

2

Uncaught TypeError: $(...).replace is not a function.

Вы должны заменить innerHTML вашего элемента, как это:

$("#textdiv").html( 
    $("#textdiv").html().replace(/Date:________/g, "<input type='text' id='textid_123'/>") 
); 

console.log($('#textid_123')); // yup, it's there, so .datepicker should work 

BTW: Вы используете /g флаг в регулярное выражение, которое означает, что вы ожидаете, чтобы заменить более чем один экземпляр Date: ___. В этом случае вы не должны использовать hardcoded id для нового элемента ввода, потому что идентификаторы должны быть уникальными.

http://jsfiddle.net/hfxvoL56/

1

Проблема заключается не в том, что Jquery не подхватывает изменения содержания, а содержание изменяется до .datepicker вызова. Проблема в том, что .replace() недействительный метод jQuery. Скорее замените содержимое HTML следующим образом:

var content = $("#textdiv").html().replace(/Date:________/g, "<input type='text' id='textid_123'/>"); 
$("#textdiv").html(content); 

Затем вы можете вызвать другие методы. Example JSFiddle

Смежные вопросы