Я знаю, что несколько сообщений уже были опубликованы на похожую тему, но я еще не нашел хорошего ответа на этот вопрос.Итак, я прошу Гуру помочь мне.
Я работаю над приложением, в котором я работаю над JavaScript и JSF .При загрузке страницы я вызываю несколько внешних файлов javascript / jquery (для разных целей), и они, кажется, работают нормально.Однако есть несколько страниц, где у меня есть некоторые компоненты (компоненты JSF), которые не загружаются изначально или не становятся частью исходного DOM (при загрузке страницы).Однако, когда он загружается после какого-либо события клика на странице (поэтому я сказал, что контент загружается на лету), то новый контент не получает эффект javaScript / jquery.
Вот краткий пример, чтобы сделатьмой вопрос более простой:
У меня есть это в заголовке страницы:
.. и это на теле
<div class="panel">
<p>some sample text</p>
<p class="button"><a href="javascript:fucntion">Modify</a></p>
</div>
(На приведенном выше выходе кода я получаю круглые кнопки для текста «Изменить»)
Когда кто-то нажимает кнопку изменения (ссылка), то получает следующеекоды:
<div class="panel">
<p>Do You want to modify</p>
<p class="button"><a href="javascript:fucntion">Yes</a></p>
<p class="button"><a href="javascript:fucntion">No</a></p>
</div>
Однако, я больше не получаю одинаковые кнопки округлой формы для «Да» и «Нет».(И вызов файлов JQuery внизу страницы тоже не помогает).
Через JSF мы используем:
<h:panelGroup render=.....>
<div class="panel">
<p>some sample text</p>
<p class="button"><a href="javascript:fucntion">Modify</a></p>
</div>
</h:panelGroup>
<h:panelGroup render=.....>
<div class="panel">
<p>Do You want to modify</p>
<p class="button"><a href="javascript:fucntion">Yes</a></p>
<p class="button"><a href="javascript:fucntion">No</a></p>
</div>
</h:panelGroup>
Таким образом, когда первая группа PanelGroup (JSF) загружается, она получает то, что находится в заголовке, загружает javaScript и отображаеткнопки с загнутым уголком, но когда загружена вторая панель, она не получает JavaScript.
У меня есть одно решение:
<h:panelGroup render=.....>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
<div class="panel">
<p>Do You want to modify</p>
<p class="button"><a href="javascript:fucntion">Yes</a></p>
<p class="button"><a href="javascript:fucntion">No</a></p>
</div>
</h:panelGroup>
Это работает, но проверяет, есть ли лучший вариант, так как мы хотим избежать многократного вызова одного и того же файла javaScriptраз.
Добавлено следующее после того, как я получил некоторые комментарии от других - На самом деле я был неправ.Плагин Curvy corner является автономным и не нуждается ни в каком другом файле javascript / jquery, кроме "curvycorners.js".Просто если вы, ребята, все еще сомневаетесь в этом (или в моих знаниях javascript), просто попробуйте следующий код и посмотрите, как работает "curvy corner" (пожалуйста, скачайте "curvycorners.js" из http://www.curvycorners.net/ или где-либо еще..и тогда попробуй мой код, он маленький и простой --------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>curvyCorners - Tab demo</title>
<style type="text/css">
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* styles for the demo sub-pages */
#demo-btn {margin: 0.5in auto;border: 0px solid #fff;color: #fff; padding:5px 15px; text-align: center; background-color: #006354;
border: 1px solid #ccc; background-image: url(btn_middle_brnd.png); background-repeat: repeat-x; border-radius:10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; height:15px; width:80px; font-size:11px; font-weight:bold;}
#demo-btn a{color:#fff; text-decoration:none;}
</style>
<script type="text/javascript" src="../curvycorners.src.js"> </script>
</head>
<body>
<div id="demo-btn">
<span><a href="javascript:function();">Cancel</a></span>
</div>
</body>
</html>