HTML-объекты, отображаемые закодированными при клонировании с помощью jQuery - PullRequest
Новая
       9

HTML-объекты, отображаемые закодированными при клонировании с помощью jQuery

0 голосов
/ 30 августа 2018

Я новичок в jQuery, и хотя мой код выполняет в основном то, что я хочу (при дублировании группы форм), у меня есть пара проблем с классами / значениями кнопок:

  1. При нажатии файл .btnadd, добавляемый к .formdupgroup, теряет свое значение, вместо того, чтобы иметь на нем символ «+», он ничего не отображает.

2. Когда дубликаты классов .btnadd изменяются на .btnremove, они отображают HTML-сущность в виде текста на кнопке. Вместо символа «х» они читают «& times;» в полном объеме.

Я уверен, что эти проблемы связаны с декодированием сущностей HTML в обоих случаях, но я не могу найти способ обойти это, не прибегая к простому вводу неравномерно расположенных символов «x» и «+». Как добавить декодированную сущность HTML в качестве значения для моих входных данных? 

$(function(){
    $(document).on('click','.btnadd',function(e){
        e.preventDefault();

        var controlForm = $(this).parents('.formdupgroup:first'),
            currentEntry = $(this).parents('.toduplicate:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            newEntry.find('select').prop('selectedIndex',0);
            controlForm.find('.btnadd:not(:last)')
                .removeClass('btnadd').addClass('btnremove')
                .removeClass('btn-success').addClass('btn-danger')
                .val('×');
    }).on('click','.btnremove', function(e){
        $(this).parents('.toduplicate:first').remove();

        e.preventDefault();
        return false;
    });
});

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
        <form>
            <div class='formdupgroup'>
                <div class='form-row toduplicate'>
                    <div class='col-md-2'>
                    </div>
                    <div class='form-group col-md-8'>
                        <label for='selectexample' class='sr-only'>Select Example</label>
                        <select name='selectexample' class='form-control'>
                            <option value='' disabled selected>Please Select an Option</option>
                            <option value='1'>Option 1</option>
                            <option value='2'>Option 2</option>
                            <option value='3'>Option 3</option>
                            <option value='4'>Option 4</option>
                            <option value='5'>Option 5</option>
                            <option value='6'>Option 6</option>
                            <option value='7'>Option 7</option>
                            <option value='8'>Option 8</option>
                            <option value='9'>Option 9</option>
                            <option value='10'>Option 10</option>
                        </select>
                    </div>
                    <div class='col-md-2'>
                        <input type='button' class='btn btn-success btnadd' value='&plus;'>
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Причина .val('&times;'); Не ставит здесь "x", потому что javascript сам не анализирует эти HTML-коды. Вам нужно будет указать, что он должен быть проанализирован.

Вот рабочая модель для использования HTML-кодов в javascript / jquery. 

$(function(){
	var parser = new DOMParser;
    $(document).on('click','.btnadd',function(e){
        e.preventDefault();

        var controlForm = $(this).parents('.formdupgroup:first'),
            currentEntry = $(this).parents('.toduplicate:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val(parser.parseFromString('&plus;', 'text/html').body.textContent);
            newEntry.find('select').prop('selectedIndex',0);
            controlForm.find('.btnadd:not(:last)')
                .removeClass('btnadd').addClass('btnremove')
                .removeClass('btn-success').addClass('btn-danger')
                .val(parser.parseFromString('&times;', 'text/html').body.textContent);
    }).on('click','.btnremove', function(e){
        $(this).parents('.toduplicate:first').remove();

        e.preventDefault();
        return false;
    });
});
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
        <form>
            <div class='formdupgroup'>
                <div class='form-row toduplicate'>
                    <div class='col-md-2'>
                    </div>
                    <div class='form-group col-md-8'>
                        <label for='selectexample' class='sr-only'>Select Example</label>
                        <select name='selectexample' class='form-control'>
                            <option value='' disabled selected>Please Select an Option</option>
                            <option value='1'>Option 1</option>
                            <option value='2'>Option 2</option>
                            <option value='3'>Option 3</option>
                            <option value='4'>Option 4</option>
                            <option value='5'>Option 5</option>
                            <option value='6'>Option 6</option>
                            <option value='7'>Option 7</option>
                            <option value='8'>Option 8</option>
                            <option value='9'>Option 9</option>
                            <option value='10'>Option 10</option>
                        </select>
                    </div>
                    <div class='col-md-2'>
                        <input type='button' class='btn btn-success btnadd' value='&plus;'>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Это также работает для HTML-кодов, которые не отображаются на вашей клавиатуре. например &spades;

0 голосов
/ 30 августа 2018

Вам не нужно экранировать + и ×, чтобы вы могли просто ввести их непосредственно в свою функцию.

Причина, по которой значение является пустым, заключается в том, что свойство val сбрасывается этой строкой: 

newEntry.find('input').val('');

Вот рабочий JSFiddle.

...