Получить идентификатор по нажатому абзацу в шаблоне загрузки в файле загрузки Blueimps Jquery - PullRequest
Новая
       21

Получить идентификатор по нажатому абзацу в шаблоне загрузки в файле загрузки Blueimps Jquery

0 голосов
/ 12 апреля 2019

Я пытаюсь настроить выгрузку файла Blueimp Jquery, чтобы он возвращал загруженный файл PDF в теге <object>, который на самом деле прекрасно работает.
Теперь я пытаюсь создать кнопку для переключения <object>pdf вкл / выкл, но когда я запускаю событие, я не могу пройти или даже сделать что-то столь же простое, как получение идентификатора от нажатой кнопки.

Вот шаблон загрузки в Jquery File UploadЯ использую: 

<!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
        {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
            <td>
                <span class="preview">
                    {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                    {% } %}
                </span>
            </td>
            <td>
                <p class="name">
                    {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                    {% } else { %}
                    <span>{%=file.name%}</span>
                    {% } %}
                </p>


<!--What I'm trying to press to toggle the pdfviewer -->
                <p style="line-height: 30px;
margin: auto;
font-size: 16px;
padding: 5px;
text-align: center;
background: #555;
border: solid 1px #666;
color: #ffffff;
border-radius: 3px;
user-select: none; cursor:pointer;" id="hejsaa" onclick="Sayhi()">
                    Tryk her for at vise eller skjule elementer
                </p>
                <object class="pdfviewer" width="400" height="500" type="application/pdf" id="noget" data="{%=file.url%}?#zoom=85&scrollbar=1&toolbar=0&navpanes=0"></object>

                {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                {% } %}
            </td>
            <td>
                <span class="size">{%=o.formatFileSize(file.size)%}</span>
            </td>
            <td>
                {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
                {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
                {% } %}
            </td>
        </tr>
        {% } %}
    </script>

И вот сценарий, который запускается (и он срабатывает успешно): 

function Sayhi() {
console.log($(this).attr('id'));
$(this).next().toggle(1000);
}

Мой консольный журнал говорит, что не определен, когда я нажимаю <p> тег.

Я также пробовал проходить через элементы, но и там мне не удалось.

Редактировать: Кажется, это как-то связано с тем, что BlueImp Jquery File Upload добавляетHTML-код для DOM динамически, что означает, что обработчики не подключены, и он не будет регистрировать событие щелчка / привязывать его к элементу.

1 Ответ

0 голосов
/ 17 апреля 2019

Вы можете отправить элемент по параметру и получить его в функции.

См. Пример: 

function Sayhi(e) {
	console.log($(e).attr('id'));
	$(e).next().toggle(1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="hejsaa" onClick="Sayhi(this)"> Tryk her for at vise eller skjule elementer </p>
<p style="display:none;">Next</p>
...