Ruby on Rails - JQuery не работает должным образом, хотя он работает «внешний»

Question

Это может быть немного вопрос новичков Ruby on Rails - я создал легкий JQuery-код.

$("input[id^='show_Fulltext']").click(function(){ 
$("#Fulltext".concat($(this).val())).toggle(); 
}); 

Затем я добавил некоторые HTML:

<input type='button' value='2' id='show_Fulltext2'></input> 
<input type='button' value='1' id='show_Fulltext1'></input> 
<div id="Fulltext1" style="display:none;">Substring 1</div> 
<div id="Fulltext2" style="display:none;">Substring 2</div> 

Теперь результат являются дивы, которые я могу включить или отключить. https://jsfiddle.net/z1w1p3o1/71/

Это прекрасно работает и почему я хочу, чтобы он работал (ВНЕШНИЙ).

Далее я попытался заставить этот код работать в моем приложении Ruby on Rails. Я должен добавить, что я не создавал проект, поэтому в проекте уже есть JQuery, но я не понимаю, почему этот JQuery уже работает, и мой не работает:

Я отредактировал файл application.js Теперь, как в следующем (в основном я скопировал свой код в него):

$(function() { 
/* 
$('#content_main th a, #content_main .pagination a',).live('click', function(){ 
    $.getScript(this.href); 
    return false; 
    }); 
*/ 

    $('#search input').keyup(function() { 
    $.get($('#search').attr('action'), $('#search').serialize(), null,'script'); 
    return false; 
    }); 

$('#search2 input').keyup(function() { 
    $.get($('#search2').attr('action'), $('#search2').serialize(), null,'script'); 
    return false; 
    }); 


    $('#search select').change(function() { 
    $.get($('#search').attr('action'), $('#search').serialize(), null,'script'); 
    return false; 
    }); 

    //$('#search :radio').change(function() { 
    $('#search :radio').change(function() { 
    $.get($('#search').attr('action'), $('#search').serialize(), null,'script'); 
    return false; 
    }); 
    // HERE IS THE CODE I COPIED!! ----------- 
    $("input[id^='show_Fulltext']").click(function(){ 
    $("#Fulltext".concat($(this).val())).toggle(); 
    }); 
    //------------------------------------- 

    $('#initiation_planned').datepicker({ dateFormat: "yy-mm-dd" }); 
    $('#initiation').datepicker({ dateFormat: "yy-mm-dd" }); 
    $('#first_recruitment').datepicker({ dateFormat: "yy-mm-dd" }); 
    $('#last_recruitment').datepicker({ dateFormat: "yy-mm-dd" }); 
    $('#lock_planned').datepicker({ dateFormat: "yy-mm-dd" }); 
    $('#arch_end').datepicker({ dateFormat: "yy-mm-dd" }); 
    $('#lock').datepicker({ dateFormat: "yy-mm-dd" }); 
}); 

Теперь, если я редактировать HTML в моем Ruby On Rails проекта, как показано выше (работает наружно в редакторе), кнопки не переключает дивизий. Я предполагаю, что все JS не работает. Я редактировал файл, в котором уже включен JS-код. Любые идеи, в которых я, возможно, допустил ошибку? `

Answer 1

Вы можете достичь того же самого элемента без ID довольно легко.

$('.module').on('click', 'button', function(){ 
 
    var $self = $(this); 
 
    var $txt = $self.siblings('.full-text').eq($self.index()); 
 
    $txt.toggle(); 
 
});

.full-text { display: none }

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

 
<div class="module"> 
 
    <button>Show 1</button> 
 
    <button>Show 2</button> 
 
    <div class="full-text">Full text 1</div> 
 
    <div class="full-text">Full text 2</div> 
 
</div>