Jquery function doesn't work (with smarty).

Question

Hi! I can't find whats the wrong with this script. Please help me!

{elseif $text[i].text == "%SubPages"}

<!-- js-->
{literal}
<script type="text/javascript">
$(function(){
$("#button_{/literal}{$text[i].id}{literal}").click(function(event) {
event.preventDefault();
$("#settings_{/literal}{$text[i].id}{literal}").toggle();
});
$("#settings_{/literal}{$text[i].id}{literal}").click(function(event) {
$(this).hide();
});
});
</script>
{/literal}  

<img src='images/subpages.png' />
<!-- button msg-->
<input type="button" id="button_{$text[i].id}" value="[szerkesztés]">
<!-- loading msg-->
<div class="loading_message" id="settings_{$text[i].id}"><div id="message_content"><b><b><b>
asdasdasdasd 
</b></b></b></div></div>
{/if}

My problem is the div (class loading msg) does not appear on click. Why?

The HTML source code:

<li class="default" id="listItem_1041">
<a class="ui-icon ui-icon-close" id="1041" onclick="return ajaxTextKill(this.getAttribute('id'));"></a>
<!-- js-->

<script type="text/javascript">
$(function(){
$("#button_1041").click(function(event) {
event.preventDefault();
$("#settings_1041").toggle();
});
$("#settings_1041").click(function(event) {
$(this).hide();
});
});
</script>

<img src="images/subpages.png">

<!-- button msg-->
<input type="button" id="button_1041" value="[szerkesztés]">

<!-- loading msg-->
<div class="loading_message" id="settings_1041"><div id="message_content"><b><b><b>
asdasdasdasd 
</b></b></b></div></div>
</li>

Answer 1

I think that the loading_message class is displayed and the jquery toggle will hide it. Try adding a display none to that div or use instead of

$("#settings_1041").toggle(); 

this one:

$("#settings_1041").show();