2015-09-02 2 views
-2

Итак, я программирую систему типа CMS, чтобы пользователь мог редактировать свою собственную страницу. Способ, которым он должен работать, заключается в том, что пользователь может добавить столько же контейнеров, сколько захочет на страницу, и каждый из этих контейнеров имеет свой собственный текстовый редактор. У этих текстовых редакторов есть свои кнопки (как жирный, курсив, ect). Но когда у меня есть один контейнер, кнопки работают нормально, но тогда, когда у меня есть два контейнера, второй кусок кнопок не работает.Два из тех же классов, один работает, один не

Вот мой JQuery код, (Жирный, курсив, ЭСТ функция работает полностью.) -

  $('.bold').click(function() { 
       var mytext = bold(); 
      }); 

      $('.italic').click(function(){ 
       var mytext = italic(); 
      }); 
      $('.left').click(function(){ 
       var mytext = left(); 
      }); 
      $('.right').click(function(){ 
       var mytext = right(); 
      }); 
      $('.center').click(function(){ 
       var mytext = center(); 
      }); 

И это код кнопки. -

<div class="slots"> 
<input class="bold" type="button" value=""> 
<input class="italic" type="button" value=""> 
<input class="left" type="button" value=""> 
<input class="center" type="button" value=""> 
<input class="right" type="button" value=""> 
</div> 

Проблема заключается в том, что, когда у меня есть только одна кнопка установить это работает, но когда у меня есть две кнопки устанавливает один работает, а другой нет.

+1

Если у вас есть два набора кнопок, как являются 'bold',' italic' и т.д. функции должны знать, какой из них работать дальше? Вы не передаете им никаких аргументов. –

+2

Я думаю, нам нужно будет увидеть больше кода, чтобы помочь вам - моя интуиция заключается в том, что проблема, вероятно, связана с функциями 'bold()', 'italic()' и т. Д. –

+0

Возможный дубликат [jQuery: найти поле ввода ближе к кнопке] (http://stackoverflow.com/questions/20357017/jquery-find-input-field-closest-to-button) –

ответ

1

Как это должно работать в том, что пользователь может добавить стольких контейнеров, как они хотят на странице

Если элементы динамически добавляется в document, попробуйте делегирование click события

$(document).on("click", ".bold", handler); 

$(function() { 
 
$(".abc").on("click", function() { 
 
    console.log(this.textContent) 
 
}); 
 

 
$("<div class=abc />").text("click def") 
 
    .appendTo("body") 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 

 
<body> 
 
    <div class="abc">click abc</div> 
 
</body>


$(function() { 
 
    $(document).on("click", ".abc", function() { 
 
    console.log(this.textContent) 
 
    }); 
 

 
    $("<div class=abc />").text("click def") 
 
    .appendTo("body") 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<body> 
 
    <div class="abc">click abc</div> 
 
</body>

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